'use client';

import * as React from 'react';

import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { Separator } from '@/components/ui/separator';
import { NavList } from '@/components/layout/nav-list';
import type { NavItem } from '@/lib/layout/nav-items';

interface DrawerProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  brand: React.ReactNode;
  items: NavItem[];
  footer: React.ReactNode;
}

/**
 * Menu deslizante mobile — réplica do menu completo da sidebar desktop.
 * Fecha ao navegar (`NavList.onNavigate`) ou ao tocar fora (comportamento
 * padrão do `Sheet`/Radix Dialog).
 */
export function Drawer({ open, onOpenChange, brand, items, footer }: DrawerProps) {
  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent side="left" className="w-4/5 gap-0 p-0">
        <SheetHeader className="h-16 flex-row items-center gap-2 px-4 py-0">
          {brand}
          <SheetTitle className="sr-only">Menu de navegação</SheetTitle>
        </SheetHeader>
        <Separator />
        <div className="min-h-0 flex-1 overflow-y-auto px-3 py-4">
          <NavList items={items} onNavigate={() => onOpenChange(false)} />
        </div>
        <Separator />
        <div className="flex flex-col gap-2 p-3">{footer}</div>
      </SheetContent>
    </Sheet>
  );
}