// @design-system: feedback/Skeleton
/**
 * TableSkeleton — loading placeholder for admin tables.
 * Header row + body rows of text-line skeletons.
 */

import { Skeleton } from './Skeleton';

export interface TableSkeletonProps {
  /** Number of columns. @default 4 */
  cols?: number;
  /** Number of body rows. @default 5 */
  rows?: number;
}

export function TableSkeleton({ cols = 4, rows = 5 }: TableSkeletonProps) {
  return (
    <div aria-hidden="true" role="presentation" className="flex flex-col gap-2">
      {/* Header row */}
      <div className="grid gap-3" style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}>
        {Array.from({ length: cols }).map((_, i) => (
          <Skeleton key={i} variant="text" className="w-3/4" />
        ))}
      </div>
      {/* Body rows */}
      {Array.from({ length: rows }).map((_, r) => (
        <div
          key={r}
          className="grid gap-3 rounded-md bg-[var(--color-surface-inset)] p-2"
          style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}
        >
          {Array.from({ length: cols }).map((_, c) => (
            <Skeleton key={c} variant="text" className="w-full" />
          ))}
        </div>
      ))}
    </div>
  );
}