import { Button } from "@/components/ui/button";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import { Menu } from "lucide-react";
import { MenuItem } from "@/types/menu";
import { LAYOUT_CONFIG } from "@/constants/layout";
import { MainSidebar } from "@/components/layout/MainSidebar";

interface SideMenuProps {
  menuList: MenuItem[];
  expandedMenus: Set<string>;
  isSidebarOpen: boolean;
  onSidebarToggle: (open: boolean) => void;
  onMenuClick: (menu: MenuItem) => void;
  variant?: "mobile" | "desktop";
}

/**
 * 사이드 메뉴 컴포넌트
 * 모바일에서는 Sheet로, 데스크톱에서는 햄버거 버튼으로 동작
 */
export function SideMenu({
  menuList,
  expandedMenus,
  isSidebarOpen,
  onSidebarToggle,
  onMenuClick,
  variant = "mobile",
}: SideMenuProps) {
  if (variant === "desktop") {
    // 데스크톱용 햄버거 버튼
    return (
      <Button variant="ghost" size="icon" onClick={() => onSidebarToggle(!isSidebarOpen)} className="h-8 w-8">
        <Menu className="h-5 w-5" />
      </Button>
    );
  }

  // 모바일용 Sheet 메뉴
  return (
    <Sheet open={isSidebarOpen} onOpenChange={onSidebarToggle}>
      <SheetTrigger asChild>
        <Button variant="ghost" size="icon" className="md:hidden">
          <Menu className="h-5 w-5" />
        </Button>
      </SheetTrigger>
      <SheetContent side="left" className="w-64 p-0">
        <div className="flex h-full flex-col">
          <div className="border-b p-4">
            <h2 className="font-semibold">{LAYOUT_CONFIG.COMPANY_NAME}</h2>
          </div>
          <MainSidebar
            menuList={menuList}
            expandedMenus={expandedMenus}
            onMenuClick={onMenuClick}
            className="flex-1 p-4"
          />
        </div>
      </SheetContent>
    </Sheet>
  );
}