"use client";

import { useState } from "react";
import Logo from "./Logo";
import DesktopNavigation from "./DesktopNavigation";
import DesktopActions from "./DesktopActions";
import MobileMenuButton from "./MobileMenuButton";
import MobileMenu from "./MobileMenu";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { useLocaleDirection } from "@/hooks/useLocale";
import { FaChevronLeft, FaChevronRight } from "react-icons/fa";

interface HeaderProps {
  innerPage?: boolean;
}
export default function Header({ innerPage = false }: HeaderProps) {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const t = useTranslations("header");
  const { isRTL } = useLocaleDirection();
  return (
    <header
      className={cn(
        "py-6 px-5 md:px-10 lg:px-20",
        innerPage ? "bg-primary-darker" : "bg-transparent"
      )}
    >
      <div className="flex items-center justify-between">
        <Logo />
        {!innerPage ? (
          <>
            <DesktopNavigation />

            <DesktopActions />

            <MobileMenuButton
              isOpen={isMenuOpen}
              onClick={() => setIsMenuOpen(!isMenuOpen)}
            />
          </>
        ) : (
          <Button asChild variant="radial-gradient-white">
            <Link href="/" className="flex items-center gap-2">
              {t("back")}
              {isRTL ? (
                <FaChevronLeft className="size-3 text-black" />
              ) : (
                <FaChevronRight className="size-3 text-black" />
              )}
            </Link>
          </Button>
        )}
      </div>

      {!innerPage && (
        <MobileMenu isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} />
      )}
    </header>
  );
}