interface TableSkeletonProps {
  /** Header labels, rendered in the sticky head so columns line up. */
  headers: string[];
  /** Number of placeholder rows. */
  rows?: number;
  /** Per-column placeholder bar widths (CSS lengths). Falls back to a default. */
  widths?: string[];
}

/**
 * Skeleton table that mirrors the real table's layout while data loads. Shows
 * the column structure so the page does not jump when rows arrive, and reads as
 * progress without a blocking spinner.
 */
export function TableSkeleton({
  headers,
  rows = 8,
  widths = [],
}: TableSkeletonProps) {
  const colWidths =
    widths.length === headers.length
      ? widths
      : headers.map((_, i) => (i === 0 ? "8px" : `${60 + ((i * 23) % 40)}%`));

  return (
    <div className="dt-wrap" aria-hidden="true">
      <table className="dt">
        <thead>
          <tr>
            {headers.map((h, i) => (
              <th key={i} className={i === 0 ? "dt__status" : undefined}>
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {Array.from({ length: rows }).map((_, r) => (
            <tr key={r}>
              {headers.map((_, c) => (
                <td key={c} className={c === 0 ? "dt__status" : undefined}>
                  <span
                    className={`dt__skel${c === 0 ? " dt__skel--dot" : ""}`}
                    style={c === 0 ? undefined : { width: colWidths[c] }}
                  />
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
