"use client";

import { useTranslations } from "next-intl";
import { Button } from "@/components/ui/button";
import LanguageSwitcher from "./LanguageSwitcher";
import Logo from "./Logo";
import { IoClose } from "react-icons/io5";
import { loginConfig, navigationConfig } from "./headerConfig";
import { scrollToSection } from "@/lib/utils";

interface MobileMenuProps {
  isOpen: boolean;
  onClose: () => void;
}

export default function MobileMenu({ isOpen, onClose }: MobileMenuProps) {
  const t = useTranslations("header");
  const tNav = useTranslations("header.navigation");

  if (!isOpen) return null;

  const navigationItems = navigationConfig.map((item) => ({
    ...item,
    label: tNav(item.key),
  }));

  const handleClick = (
    e: React.MouseEvent<HTMLAnchorElement>,
    href: string
  ) => {
    e.preventDefault();
    onClose();
    setTimeout(() => {
      scrollToSection(href.slice(1), 80);
    }, 150);
  };

  return (
    <div className="lg:hidden fixed inset-0 z-[60] bg-white">
      <nav className="flex flex-col">
        <div className="flex justify-between items-center px-5 py-6">
          <Logo onClick={onClose} />
          <Button
            size="icon"
            className="bg-transparent hover:bg-transparent text-primary-main transition-all duration-300"
            onClick={onClose}
          >
            <IoClose className="size-6" />
          </Button>
        </div>
        <div className="flex flex-col gap-4 text-text p-5">
          <ul className="flex flex-col gap-2">
            {navigationItems.map((item) => (
              <li key={item.key} className="p-2">
                <a
                  href={item.href}
                  className="text-[14px] hover:text-primary-main transition-all duration-300 ease-in-out cursor-pointer"
                  onClick={(e) => handleClick(e, item.href)}
                >
                  {item.label}
                </a>
              </li>
            ))}
          </ul>

          <div className="w-full h-[1px] bg-primary-lighter"></div>

          <div className="flex flex-col gap-4">
            <LanguageSwitcher
              variant="ghost"
              size="link"
              text={t("lang")}
              onClose={onClose}
            />
            <Button
              as="link"
              href={loginConfig.href}
              size="link"
              variant="ghost"
            >
              {t(loginConfig.labelKey)}
            </Button>
          </div>
        </div>
      </nav>
    </div>
  );
}