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

/**
 * Loading state for the remittance detail drawer (RemitDrawer).
 *
 * Mirrors the drawer's section heights so the layout doesn't jump when
 * data arrives. 9 primitives across 5 sections: header (1), financial
 * summary (1), parties (2), claim payments (3 rows), CAS (2).
 *
 * Header is taller than the secondary rows (48px) — it hosts the
 * remit id + status badge + paid amount + close button.
 */
export function RemitDrawerSkeleton() {
  return (
    <div
      className="flex flex-col gap-6 p-6 bg-[color:var(--m-surface)] text-[color:var(--m-ink-primary)]"
      data-testid="remit-drawer-skeleton"
      aria-busy="true"
    >
      {/* Header band — taller, prominent */}
      <Skeleton data-testid="skeleton-header" variant="default" height={48} />

      {/* Financial summary card — short row */}
      <Skeleton data-testid="skeleton-financial" variant="default" height={88} />

      {/* 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>

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

      {/* CAS panel — taller block (a collapsible list with header) */}
      <Skeleton data-testid="skeleton-cas" variant="default" height={64} />
    </div>
  );
}
