/**
 * SkeletonChart component.
 *
 * A placeholder for charts that shows a pulsing gradient bar matching the
 * chart container dimensions. Used during initial data load to improve
 * perceived responsiveness.
 */

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

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

const useStyles = makeStyles({
  skeletonChart: {
    width: "100%",
    height: "100%",
    display: "flex",
    alignItems: "flex-end",
    gap: tokens.spacingHorizontalS,
    padding: tokens.spacingVerticalM,
    boxSizing: "border-box",
  },
  bar: {
    flex: "1 1 0",
    backgroundColor: tokens.colorNeutralBackground1Hover,
    borderRadius: tokens.borderRadiusSmall,
    animation: "skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
  },
});

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

interface SkeletonChartProps {
  /** Number of bars to render. Defaults to 7. */
  barCount?: number;
  /** Height of the chart container in pixels. Defaults to 200. */
  height?: number;
}

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

/**
 * Render a skeleton chart with animated pulsing bars.
 *
 * @example
 * ```tsx
 * <SkeletonChart barCount={12} height={220} />
 * ```
 */
export function SkeletonChart({ barCount = 7, height = 200 }: SkeletonChartProps): React.JSX.Element {
  const styles = useStyles();
  const heightPx = String(height);

  return (
    <div className={styles.skeletonChart} style={{ height: `${heightPx}px` }} role="presentation">
      {Array.from({ length: barCount }).map((_, index: number) => {
        const randomHeight = 30 + Math.random() * 70;
        return (
          <div
            key={`bar-${String(index)}`}
            className={styles.bar}
            style={{ height: `${String(randomHeight)}%` }}
            aria-hidden="true"
          />
        );
      })}
    </div>
  );
}
