/**
 * SkeletonTableRow component.
 *
 * A placeholder row for tables that mimics the layout and height of a real
 * DataGrid row. Used to show loading state while data is being fetched.
 * Prevents content shift by matching the actual row dimensions.
 */

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

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

const useStyles = makeStyles({
  skeletonRow: {
    display: "flex",
    padding: `${tokens.spacingVerticalS} 0`,
    gap: tokens.spacingHorizontalM,
    borderBottomWidth: "1px",
    borderBottomStyle: "solid",
    borderBottomColor: tokens.colorNeutralStroke2,
  },
  skeletonCell: {
    flex: "1 1 0",
    minWidth: "80px",
    backgroundColor: tokens.colorNeutralBackground1Hover,
    borderRadius: tokens.borderRadiusSmall,
    height: "16px",
    animation: "skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
  },
});

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

interface SkeletonTableRowProps {
  /** Number of cells to render. Defaults to 5. */
  cellCount?: number;
}

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

/**
 * Render a skeleton row that matches table dimensions.
 *
 * @example
 * ```tsx
 * <div>
 *   {Array.from({ length: 5 }).map((_, i) => (
 *     <SkeletonTableRow key={i} cellCount={6} />
 *   ))}
 * </div>
 * ```
 */
export function SkeletonTableRow({ cellCount = 5 }: SkeletonTableRowProps): React.JSX.Element {
  const styles = useStyles();

  return (
    <div className={styles.skeletonRow} role="presentation">
      {Array.from({ length: cellCount }).map((_, index: number) => (
        <div
          key={`cell-${String(index)}`}
          className={styles.skeletonCell}
          aria-hidden="true"
        />
      ))}
    </div>
  );
}