import { Skeleton } from "@/components/ui/skeleton";

/**
 * Loading state for the claim detail drawer (SP4).
 *
 * Mirrors the drawer's section heights so the layout doesn't jump when
 * data arrives. 10 primitives across 6 sections: header (1), validation
 * (1), service lines (3 rows), diagnoses (2), parties (2), history (1).
 */
export function ClaimDrawerSkeleton() {
  return (
    <div
      className="flex flex-col gap-6 p-6 bg-[color:var(--m-surface)] text-[color:var(--m-ink-primary)]"
      data-testid="claim-drawer-skeleton"
      aria-busy="true"
    >
      {/* Header band — taller, prominent */}
      <Skeleton data-testid="skeleton-header" variant="default" height={48} />

      {/* Validation panel — short row */}
      <Skeleton data-testid="skeleton-validation" variant="row" />

      {/* Service lines — three stacked rows */}
      <div className="flex flex-col gap-2">
        <Skeleton data-testid="skeleton-lines-1" variant="row" />
        <Skeleton data-testid="skeleton-lines-2" variant="row" />
        <Skeleton data-testid="skeleton-lines-3" variant="row" />
      </div>

      {/* Diagnoses — two short text rows */}
      <div className="flex flex-col gap-1.5">
        <Skeleton data-testid="skeleton-dx-1" variant="text" width="60%" />
        <Skeleton data-testid="skeleton-dx-2" variant="text" width="45%" />
      </div>

      {/* Parties — two rows */}
      <div className="flex flex-col gap-2">
        <Skeleton data-testid="skeleton-parties-1" variant="row" />
        <Skeleton data-testid="skeleton-parties-2" variant="row" />
      </div>

      {/* History — tall block */}
      <Skeleton data-testid="skeleton-history" variant="default" height={96} />
    </div>
  );
}