/**
 * SkeletonStat component.
 *
 * A placeholder for stat cards and badges showing a pulsing skeleton that
 * matches the dimensions of actual stat content. Used for loading states
 * on dashboard status indicators.
 */

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

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

const useStyles = makeStyles({
  skeletonStat: {
    display: "flex",
    flexDirection: "column",
    gap: tokens.spacingVerticalS,
  },
  label: {
    height: "12px",
    width: "60%",
    backgroundColor: tokens.colorNeutralBackground1Hover,
    borderRadius: tokens.borderRadiusSmall,
    animation: "skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
  },
  value: {
    height: "24px",
    width: "100%",
    backgroundColor: tokens.colorNeutralBackground1Hover,
    borderRadius: tokens.borderRadiusSmall,
    animation: "skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
  },
});

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

interface SkeletonStatProps {
  /** Whether to show the label line. Defaults to true. */
  showLabel?: boolean;
}

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

/**
 * Render a skeleton stat card with animated pulsing placeholder.
 *
 * @example
 * ```tsx
 * <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "16px" }}>
 *   <SkeletonStat />
 *   <SkeletonStat />
 *   <SkeletonStat />
 * </div>
 * ```
 */
export function SkeletonStat({ showLabel = true }: SkeletonStatProps): React.JSX.Element {
  const styles = useStyles();

  return (
    <div className={styles.skeletonStat} role="presentation">
      {showLabel && <div className={styles.label} aria-hidden="true" />}
      <div className={styles.value} aria-hidden="true" />
    </div>
  );
}
