/**
 * SkeletonTable component.
 *
 * A placeholder for DataGrid tables showing multiple skeleton rows with
 * animated pulsing. Used to display table structure during data load.
 */

import {
  makeStyles,
} from "@fluentui/react-components";
import { SkeletonTableRow } from "./SkeletonTableRow";

// ---------------------------------------------------------------------------
// Styles
// ---------------------------------------------------------------------------

const useStyles = makeStyles({
  skeletonTable: {
    display: "flex",
    flexDirection: "column",
    width: "100%",
  },
});

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

interface SkeletonTableProps {
  /** Number of rows to render. Defaults to 5. */
  rowCount?: number;
  /** Number of cells per row. Defaults to 6. */
  cellCount?: number;
}

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

/**
 * Render a skeleton table with multiple animated rows.
 *
 * @example
 * ```tsx
 * <SkeletonTable rowCount={10} cellCount={5} />
 * ```
 */
export function SkeletonTable({ rowCount = 5, cellCount = 6 }: SkeletonTableProps): React.JSX.Element {
  const styles = useStyles();

  return (
    <div className={styles.skeletonTable} role="presentation">
      {Array.from({ length: rowCount }).map((_, index: number) => (
        <SkeletonTableRow key={`row-${String(index)}`} cellCount={cellCount} />
      ))}
    </div>
  );
}