'use client';

import * as React from 'react';
import { Menu } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet';
import { FolderTree } from './folder-tree';
import { Logo } from './logo';
import type { Folder } from '@/app/api/files/route';


interface MobileSheetProps {
    rootFolder: Folder;
    currentPath: string;
    onSelectFolder: (path: string) => void;
}

export function MobileSheet({ rootFolder, currentPath, onSelectFolder }: MobileSheetProps) {
  const [isOpen, setIsOpen] = React.useState(false);

  const handleSelectFolder = (path: string) => {
    onSelectFolder(path);
    setIsOpen(false); 
  };

  return (
    <Sheet open={isOpen} onOpenChange={setIsOpen}>
      <SheetTrigger asChild>
        <Button variant="outline" size="icon">
          <Menu className="h-5 w-5" />
          <span className="sr-only">Toggle navigation menu</span>
        </Button>
      </SheetTrigger>
      <SheetContent side="left" className="p-0 flex flex-col">
        <SheetHeader className="p-4 border-b">
          <SheetTitle className="sr-only">Navigation Menu</SheetTitle>
          <Logo />
        </SheetHeader>
        <div className="flex-1 overflow-auto py-2">
            <FolderTree
                rootFolder={rootFolder}
                currentPath={currentPath}
                onSelectFolder={handleSelectFolder}
            />
        </div>
      </SheetContent>
    </Sheet>
  );
}