"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import { Menu, X } from "lucide-react";

export function MobileMenu({ items }: { items: { label: string; href: string }[] }) {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => {
      document.body.style.overflow = "";
    };
  }, [open]);

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        aria-label="Mở menu"
        className="lg:hidden inline-flex items-center justify-center w-9 h-9 rounded-md hover:bg-[var(--bg-subtle)]"
        style={{ color: "var(--text-secondary)" }}
      >
        <Menu size={18} />
      </button>
      {open && (
        <div className="fixed inset-0 z-[100] lg:hidden">
          <div
            className="absolute inset-0 bg-black/50 backdrop-blur-sm"
            onClick={() => setOpen(false)}
          />
          <aside
            className="absolute left-0 top-0 h-full w-[80%] max-w-[320px] flex flex-col"
            style={{ background: "var(--bg-base)" }}
          >
            <div
              className="flex items-center justify-between p-4 border-b"
              style={{ borderColor: "var(--border)" }}
            >
              <span className="font-[family-name:var(--font-newsreader)] text-lg font-bold">
                Menu
              </span>
              <button
                type="button"
                onClick={() => setOpen(false)}
                aria-label="Đóng"
                className="w-9 h-9 inline-flex items-center justify-center rounded-md hover:bg-[var(--bg-subtle)]"
              >
                <X size={18} />
              </button>
            </div>
            <nav className="flex-1 overflow-y-auto p-2">
              {items.map((it) => (
                <Link
                  key={it.href}
                  href={it.href}
                  onClick={() => setOpen(false)}
                  className="block px-4 py-3 rounded-md text-base font-medium hover:bg-[var(--bg-subtle)]"
                  style={{ color: "var(--text-primary)" }}
                >
                  {it.label}
                </Link>
              ))}
            </nav>
            <div
              className="p-4 border-t text-xs"
              style={{ borderColor: "var(--border)", color: "var(--text-tertiary)" }}
            >
              © Finzone Network
            </div>
          </aside>
        </div>
      )}
    </>
  );
}