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

/**
 * Placeholder for the ISIN accordion list while product / verdict filters refetch.
 */
export function DeliveredHoldingsHistorySkeleton({ rows = 5 }: { rows?: number }) {
  return (
    <div className="space-y-2" role="status" aria-live="polite" aria-label="Loading holdings">
      {Array.from({ length: rows }, (_, index) => (
        <div key={index} className="overflow-hidden rounded-lg border">
          <div className="flex w-full flex-wrap items-center gap-2 bg-muted/30 px-3 py-2.5">
            <Skeleton className="size-4 shrink-0 rounded-sm" />
            <div className="min-w-0 flex-1 space-y-2">
              <div className="flex flex-wrap items-center gap-2">
                <Skeleton className="h-4 w-48 max-w-[55%]" />
                <Skeleton className="h-3 w-28" />
              </div>
              <div className="flex flex-wrap items-center gap-1.5">
                <Skeleton className="h-5 w-16 rounded-full" />
                <Skeleton className="h-5 w-24 rounded-full" />
                <Skeleton className="h-5 w-20 rounded-full" />
                <Skeleton className="h-3 w-40" />
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}