"use client";

import Link from "next/link";
import { useState } from "react";
import type { NavLink } from "@/lib/types";

export default function MobileNav({ nav }: { nav: NavLink[] }) {
  const [open, setOpen] = useState(false);

  return (
    <div className="lg:hidden">
      <button
        aria-label="Toggle menu"
        onClick={() => setOpen((v) => !v)}
        className="p-2 text-ink"
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75} className="h-6 w-6">
          {open ? (
            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
          ) : (
            <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M3.75 17.25h16.5" />
          )}
        </svg>
      </button>

      {open ? (
        <div className="absolute left-0 right-0 top-full bg-bg border-b-2 border-ink shadow-lg">
          <nav className="flex flex-col px-6 py-4">
            {nav.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                onClick={() => setOpen(false)}
                className="py-3 text-sm font-semibold uppercase tracking-wide text-neutral-700 border-b border-divider last:border-0 hover:text-ink"
              >
                {item.label}
              </Link>
            ))}
            <Link
              href="/shop"
              onClick={() => setOpen(false)}
              className="mt-4 inline-flex items-center justify-center bg-ink text-white font-display font-bold text-xs tracking-[0.1em] uppercase px-4 py-3 rounded-[10px]"
            >
              allBETs
            </Link>
          </nav>
        </div>
      ) : null}
    </div>
  );
}