Skeleton

import * as React from "react";
import { cn } from "@/lib/ledger/cn";

export interface SkeletonProps extends React.ComponentPropsWithoutRef<"div"> {
  height?: number | string;
  radius?: "xs" | "sm" | "md" | "lg" | "xl";
  width?: number | string;
}

/**
 * Structural, matching the exact shape, position and radii of what it
 * replaces. A slow breathe is permitted; a shimmer sweep is not — a
 * translating gradient across a full-page skeleton is the clearest
 * template tell there is.
 */
export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
  ({ className, width, height = 16, radius = "xs", ...props }, ref) => (
    <div
      aria-hidden="true"
      className={cn("ledger-breathe bg-surface-sunken", `rounded-${radius}`, className)}
      ref={ref}
      style={{ height, width }}
      {...props}
    />
  ),
);
Skeleton.displayName = "Skeleton";

/**
 * The figure block reserves the exact figure width, or the card jumps when
 * the data lands — and that jump is worse than no skeleton at all.
 */
export function KpiCardSkeleton({ className }: { className?: string }) {
  return (
    <div
      aria-busy="true"
      aria-label="Loading metric"
      className={cn("rounded-xl border border-border bg-surface p-6", className)}
      role="status"
    >
      <Skeleton height={16} width={112} />
      <Skeleton className="mt-2" height={32} radius="sm" width={168} />
      <Skeleton className="mt-2" height={16} width={136} />
    </div>
  );
}

export function TableSkeleton({ rows = 6, className }: { rows?: number; className?: string }) {
  return (
    <div aria-busy="true" className={cn("rounded-xl border border-border bg-surface", className)}>
      {Array.from({ length: rows }, (_, i) => (
        <div
          className="flex h-10 items-center gap-4 border-b border-border-subtle px-4 last:border-b-0"
          key={i}
        >
          <Skeleton height={12} width={64} />
          <Skeleton height={12} width="35%" />
          <Skeleton className="ml-auto" height={12} width={80} />
        </div>
      ))}
    </div>
  );
}

export function StatementSkeleton({ className }: { className?: string }) {
  return (
    <div aria-busy="true" className={cn("space-y-2", className)}>
      {[80, 60, 70, 55, 90].map((w, i) => (
        <div className="flex items-center justify-between gap-8" key={i}>
          <Skeleton className="max-w-[220px]" height={12} width={`${w}%`} />
          <Skeleton height={12} width={72} />
        </div>
      ))}
    </div>
  );
}