"use client";

import { useState } from "react";
import { Menu } from "lucide-react";

import { Button } from "@/components/ui/Button";
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
        onClick={() => setOpen(true)}
        aria-label="打开导航"
        aria-expanded={open}
        variant="ghost"
        size="icon"
        className="-ml-2 lg:hidden"
      >
        <Menu className="h-5 w-5" aria-hidden="true" />
      </Button>
      <Drawer
        open={open}
        onClose={() => setOpen(false)}
        side="left"
        label="主导航"
      >
        <NavItems
          projectId={projectId}
          activeNav={activeNav}
          onNavigate={() => setOpen(false)}
        />
      </Drawer>
    </>
  );
}