/**
 * =============================================================================
 * QWHPI — Quebec Weekly Housing Price Index
 * Author  : Simon-Pierre Boucher
 * Contact : contact@spboucher.ai
 * File    : web/components/Skeleton.tsx
 * Purpose : Shimmer skeleton loaders — tiles, charts, tables (no "Loading…").
 * =============================================================================
 */

export function SkeletonBlock({ h = 20, w = "100%", style = {} }: {
  h?: number; w?: number | string; style?: React.CSSProperties;
}) {
  return (
    <div className="skeleton" aria-hidden
         style={{ height: h, width: w, ...style }} />
  );
}

export function TileSkeleton() {
  return (
    <div className="card stat-tile" aria-busy="true">
      <SkeletonBlock h={11} w="55%" />
      <SkeletonBlock h={32} w="70%" style={{ marginTop: 8 }} />
      <SkeletonBlock h={12} w="45%" style={{ marginTop: 6 }} />
    </div>
  );
}

export function ChartSkeleton({ height = 340 }: { height?: number }) {
  return (
    <div className="card" aria-busy="true" aria-label="Chart loading">
      <SkeletonBlock h={14} w={220} />
      <SkeletonBlock h={height - 60} style={{ marginTop: 14 }} />
    </div>
  );
}

export function TableSkeleton({ rows = 8 }: { rows?: number }) {
  return (
    <div className="card" aria-busy="true" style={{ padding: "10px 14px" }}>
      {Array.from({ length: rows }, (_, i) => (
        <SkeletonBlock key={i} h={16}
                       style={{ marginTop: i ? 12 : 4, opacity: 1 - i * 0.09 }} />
      ))}
    </div>
  );
}

export function DashboardSkeleton() {
  return (
    <>
      <div className="grid cols-4" style={{ marginTop: 24 }}>
        {Array.from({ length: 4 }, (_, i) => <TileSkeleton key={i} />)}
      </div>
      <div style={{ marginTop: 16 }}>
        <TableSkeleton rows={10} />
      </div>
    </>
  );
}