"use client";

import { useTranslations } from "next-intl";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { IoClose } from "react-icons/io5";
import Logo from "./Logo";
import LanguageSwitcher from "./LanguageSwitcher";

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 = [
    { label: tNav("features"), href: "#features", key: "features" },
    { label: tNav("pricing"), href: "#pricing", key: "pricing" },
    { label: tNav("about"), href: "#about", key: "about" },
    { label: tNav("howItWorks"), href: "#how-it-works", key: "howItWorks" },
  ];

  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
    e.preventDefault();
    onClose();
    setTimeout(() => {
      const element = document.querySelector(href);
      if (element) {
        const headerOffset = 80;
        const elementPosition = element.getBoundingClientRect().top;
        const offsetPosition = elementPosition + window.pageYOffset - headerOffset;

        window.scrollTo({
          top: offsetPosition,
          behavior: "smooth",
        });
      }
    }, 150);
  };

  return (
    <div className="lg:hidden fixed inset-0 z-50 bg-[#170A22]">
      <div className="flex flex-col h-full px-5 pt-6">
        <div className="flex items-center justify-between mb-8">
          <Logo onClick={onClose} />
          <Button
            variant="ghost"
            size="icon"
            className="text-white hover:bg-transparent hover:text-white transition-all"
            onClick={onClose}
          >
            <IoClose className="size-6" />
          </Button>
        </div>

        <nav className="flex flex-col gap-6 text-white">
          {navigationItems.map((item) => (
            <a
              key={item.key}
              href={item.href}
              className="text-[14px] hover:opacity-80 transition-opacity cursor-pointer"
              onClick={(e) => handleClick(e, item.href)}
            >
              {item.label}
            </a>
          ))}

          <div className="w-full h-px bg-white/20 my-2"></div>

          <Link
            href="/"
            className="text-[14px] hover:opacity-80 transition-opacity"
            onClick={onClose}
          >
            {t("getInTouch")}
          </Link>
          <LanguageSwitcher variant="link" onClose={onClose} />
        </nav>
      </div>
    </div>
  );
}