veza/apps/web/src/features/studio/components/cloud-file-browser/FileGrid.tsx

import React from 'react';
import { cn } from '@/lib/utils';
import { FileGridCard } from './FileGridCard';
import type { CloudFileNode } from './types';

export interface FileGridProps {
  files: CloudFileNode[];
  selectedIds: string[];
  onFileClick: (file: CloudFileNode) => void;
  onToggleSelect: (id: string) => void;
  isLoading?: boolean;
  emptyMessage?: string;
  className?: string;
}

export function FileGrid({
  files,
  selectedIds,
  onFileClick,
  onToggleSelect,
  isLoading = false,
  emptyMessage = 'No files match your filters.',
  className,
}: FileGridProps) {
  if (isLoading) {
    return (
      <div
        className={cn(
          'grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4',
          className
        )}
      >
        {Array.from({ length: 8 }).map((_, i) => (
          <FileGridCard
            key={i}
            file={{} as CloudFileNode}
            selected={false}
            onSelect={() => {}}
            onClick={() => {}}
            isLoading
          />
        ))}
      </div>
    );
  }

  if (files.length === 0) {
    return (
      <div
        className={cn(
          'min-h-layout-page-sm flex items-center justify-center text-kodo-content-dim text-sm',
          className
        )}
      >
        {emptyMessage}
      </div>
    );
  }

  return (
    <div
      className={cn(
        'grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4',
        className
      )}
    >
      {files.map((file) => (
        <FileGridCard
          key={file.id}
          file={file}
          selected={selectedIds.includes(file.id)}
          onSelect={onToggleSelect}
          onClick={onFileClick}
        />
      ))}
    </div>
  );
}