import { Skeleton } from "@/components/atoms";

interface InvoiceListSkeletonProps {
  /** Number of rows to show */
  rows?: number;
}

/**
 * List skeleton for invoices/billing.
 * Shows a heading and list items with left content and right price.
 */
export function InvoiceListSkeleton({ rows = 5 }: InvoiceListSkeletonProps) {
  return (
    <div className="space-y-4">
      <Skeleton className="h-7 w-32" />
      <div className="bg-card border border-border rounded-xl overflow-hidden">
        <div className="divide-y divide-border">
          {Array.from({ length: rows }).map((_, i) => (
            <div key={i} className="p-4 flex justify-between items-center">
              <div className="space-y-2">
                <Skeleton className="h-4 w-32" />
                <Skeleton className="h-3 w-24" />
              </div>
              <Skeleton className="h-4 w-24" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
