src/components/folder-grid-item.tsx

'use client';

import * as React from 'react';
import { Folder as FolderIcon, Share2 } from 'lucide-react';
import { Card, CardFooter } from '@/components/ui/card';
import type { Folder } from '@/app/api/files/route';
import { cn } from '@/lib/utils';
import { Checkbox } from './ui/checkbox';
import { Button } from './ui/button';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
import { ShareDialog } from './share-dialog';

interface FolderGridItemProps extends React.HTMLAttributes<HTMLDivElement> {
  folder: Folder;
  onSelectFolder: (path: string) => void;
  isSelected: boolean;
  onSelectItem: (id: string, isSelected: boolean) => void;
  isSelectionActive: boolean;
  isPublicShare?: boolean;
}

export function FolderGridItem({ folder, onSelectFolder, isSelected, onSelectItem, isSelectionActive, isPublicShare, className, ...props }: FolderGridItemProps) {
  const [isShareOpen, setIsShareOpen] = React.useState(false);

  const handleCheckboxChange = (checked: boolean) => {
    onSelectItem(folder.id, checked);
  };

  const handleCardClick = () => {
    if (isSelectionActive) {
      onSelectItem(folder.id, !isSelected);
    } else {
      onSelectFolder(folder.path);
    }
  };

  const handleShareClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    setIsShareOpen(true);
  };

  return (
    <>
      <Card
        className={cn(
          "group relative w-full aspect-square flex flex-col justify-center items-center cursor-pointer transition-all duration-200 hover:shadow-md",
          isSelected && "border-primary shadow-lg scale-[1.02]",
          className
        )}
        onClick={handleCardClick}
        {...props}
      >
          <div className={cn("absolute top-2 right-2 z-10", !isSelectionActive && "hidden")} onClick={(e) => e.stopPropagation()}>
            <Checkbox 
              checked={isSelected} 
              onCheckedChange={handleCheckboxChange}
              aria-label={`Select folder ${folder.name}`}
            />
          </div>

          <div className="flex flex-col items-center justify-center flex-1">
              <FolderIcon className="h-24 w-24 text-primary/70 group-hover:text-primary transition-colors" />
          </div>

          <CardFooter className="p-2 !pt-2 w-full flex-col items-start">
             <p className="font-semibold text-sm truncate text-center w-full">{folder.name}</p>
             <div className="w-full flex justify-end gap-1 mt-1">
                {!isPublicShare && (
                    <TooltipProvider>
                         <Tooltip>
                             <TooltipTrigger asChild>
                                 <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleShareClick}>
                                     <Share2 className="h-4 w-4" />
                                 </Button>
                             </TooltipTrigger>
                             <TooltipContent><p>Share</p></TooltipContent>
                         </Tooltip>
                    </TooltipProvider>
                )}
             </div>
          </CardFooter>
      </Card>
      {!isPublicShare && (
        <ShareDialog
          isOpen={isShareOpen}
          onOpenChange={setIsShareOpen}
          itemName={folder.name}
          itemPath={folder.path}
          itemType="folder"
        />
      )}
    </>
  );
}