"use client";

import Link from "next/link";
import { Menu, X } from "lucide-react";
import { useState } from "react";
import { usePathname } from "next/navigation";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type NavItem = {
  label: string;
  href: string;
};

type MobileMenuProps = {
  navItems: NavItem[];
};

export function MobileMenu({ navItems }: MobileMenuProps) {
  const [open, setOpen] = useState(false);
  const pathname = usePathname();

  return (
    <div className="lg:hidden">
      <button
        type="button"
        aria-label={open ? "Close menu" : "Open menu"}
        className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border bg-white text-navy-deep shadow-sm"
        onClick={() => setOpen((value) => !value)}
      >
        {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
      </button>

      {open ? (
        <div className="absolute left-0 right-0 top-20 border-b border-border bg-white shadow-card">
          <nav className="container-custom flex flex-col gap-1 py-4">
            {navItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                aria-current={
                  item.href === "/"
                    ? pathname === "/"
                      ? "page"
                      : undefined
                    : pathname.startsWith(item.href)
                      ? "page"
                      : undefined
                }
                className={cn(
                  "rounded-xl px-3 py-3 text-sm font-semibold text-navy-muted hover:bg-primary-soft hover:text-primary-deep",
                  (item.href === "/" ? pathname === "/" : pathname.startsWith(item.href)) &&
                    "bg-primary-soft text-primary-deep",
                )}
                onClick={() => setOpen(false)}
              >
                {item.label}
              </Link>
            ))}
            <Button
              className="mt-2 w-full"
              href="/book-test-ride"
              onClick={() => setOpen(false)}
            >
              Book Test Ride
            </Button>
          </nav>
        </div>
      ) : null}
    </div>
  );
}