"use client";

import { useState } from "react";

import type { ActiveNav } from "@/lib/nav/items";
import { Drawer } from "./Drawer";
import { NavItems } from "./NavItems";

interface NavDrawerProps {
  projectId?: string;
  activeNav?: ActiveNav;
}

// 移动端导航：汉堡按钮 + 左侧抽屉（仅 <lg；桌面用 LeftNav 静态侧栏）。UX §5.1。
export function NavDrawer({ projectId, activeNav }: NavDrawerProps) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        aria-label="打开导航"
        aria-expanded={open}
        className="-ml-1 rounded p-2 text-ink hover:text-cinnabar lg:hidden"
      >
        <span aria-hidden="true" className="block text-lg leading-none">
          ☰
        </span>
      </button>
      <Drawer
        open={open}
        onClose={() => setOpen(false)}
        side="left"
        label="主导航"
      >
        <NavItems
          projectId={projectId}
          activeNav={activeNav}
          onNavigate={() => setOpen(false)}
        />
      </Drawer>
    </>
  );
}
