import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@kit/ui/table';

export default function TableSkeleton({
  rows = 1,
  cols = 7,
}: {
  rows?: number;
  cols?: number;
}) {
  return (
    <Table className="w-full border-separate animate-pulse rounded-lg border">
      <TableHeader className="text-ui-fg-subtle txt-medium-plus">
        <TableRow>
          {Array.from({ length: cols }).map((_, i) => (
            <TableHead key={i} className="p-2">
              <div className="h-4 w-22 rounded bg-gray-200"></div>
            </TableHead>
          ))}
        </TableRow>
      </TableHeader>
      <TableBody>
        {Array.from({ length: rows }).map((_, r) => (
          <TableRow key={r} className="border-t border-gray-200">
            {Array.from({ length: cols }).map((_, c) => (
              <TableCell key={c}>
                <div className="h-4 w-22 rounded bg-gray-200"></div>
              </TableCell>
            ))}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}
