"use client";

import { useLocale } from "use-intl";
import { useState } from "react";
import { useLanguageStorage } from "@/hooks/useLanguageStorage";
import Logo from "./components/Logo";
import LanguageButton from "./components/LanguageButton";
import MobileMenuButton from "./components/MobileMenuButton";
import Links from "./components/Links";
import MobileMenu from "./components/MobileMenu";

export default function Header() {
  const locale = useLocale();
  const { changeLanguage } = useLanguageStorage();
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const handleLocaleChange = (newLocale: string) => {
    changeLanguage(newLocale);
  };

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  const closeMenu = () => {
    setIsMenuOpen(false);
  };

  return (
    <header className="absolute top-0 left-0 z-50 w-full transition-all duration-300 py-6 px-5 md:px-20 bg-transparent">
      <div className="mx-auto flex justify-between items-center text-white">
        <Logo />

        <div className="hidden xl:flex flex-1 justify-center">
          <Links />
        </div>

        <div className="hidden xl:flex items-center space-x-2 md:space-x-3 lg:space-x-4">
          <LanguageButton onLocaleChange={handleLocaleChange} />
        </div>

        <MobileMenuButton isOpen={isMenuOpen} onToggle={toggleMenu} />
      </div>

      <MobileMenu
        isOpen={isMenuOpen}
        onLocaleChange={handleLocaleChange}
        onClose={closeMenu}
      />
    </header>
  );
}