"use client";

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

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

  useEffect(() => {
    if (!open) return;
    const original = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = original;
    };
  }, [open]);

  return (
    <div className="lg:hidden">
      <button
        aria-label={open ? "Close menu" : "Open menu"}
        onClick={() => setOpen((v) => !v)}
        className="flex flex-col gap-1.5 p-2"
      >
        <span className="block h-0.5 w-6 bg-white" />
        <span className="block h-0.5 w-6 bg-white" />
        <span className="block h-0.5 w-6 bg-white" />
      </button>

      {open ? (
        <div className="fixed inset-0 top-[92px] z-40 bg-bg overflow-y-auto">
          <nav className="flex flex-col p-6 gap-1">
            {nav.map((item, i) => (
              <Link
                key={`${item.href}-${i}`}
                href={item.href}
                onClick={() => setOpen(false)}
                className="border-b border-neutral-300 py-3 text-base font-medium text-ink"
              >
                {item.label}
              </Link>
            ))}
          </nav>
        </div>
      ) : null}
    </div>
  );
}