import { Skeleton } from '@/components/ui/skeleton';

interface TableSkeletonProps {
  rowCount?: number;
  columnCount?: number;
}

export function TableSkeleton({ rowCount = 5, columnCount = 4 }: TableSkeletonProps) {
  return (
    <div className="space-y-4 max-w-7xl mx-auto animate-in fade-in duration-200">
      {/* Title/Header Skeleton */}
      <Skeleton className="h-8 w-1/4 bg-muted/60" />
      
      <div className="space-y-2">
        {/* Search Bar Skeleton */}
        <Skeleton className="h-10 w-full bg-muted/40 rounded-lg" />
        
        {/* Table Container Skeleton */}
        <div className="border border-border/40 rounded-xl overflow-hidden bg-surface p-4 space-y-3">
          {/* Header Row Skeleton */}
          <div className="flex gap-4 pb-2 border-b border-border/10">
            {Array.from({ length: columnCount }).map((_, i) => (
              <Skeleton key={i} className="h-4 flex-1 bg-muted/40" />
            ))}
          </div>
          {/* Body Rows Skeleton */}
          {Array.from({ length: rowCount }).map((_, rowIndex) => (
            <div key={rowIndex} className="flex gap-4 py-1">
              {Array.from({ length: columnCount }).map((_, colIndex) => (
                <Skeleton key={colIndex} className="h-5 flex-1 bg-muted/20" />
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}