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

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

/**
 * Table skeleton for the subscriptions list.
 * Shows 3 columns: Service, Amount, Next Due.
 */
export function SubscriptionTableSkeleton({ rows = 6 }: SubscriptionTableSkeletonProps) {
  return (
    <div className="bg-card rounded-xl border border-border shadow-sm overflow-hidden">
      <div className="px-6 py-4 border-b border-border">
        <Skeleton className="h-10 w-full max-w-md rounded-lg" />
      </div>
      <div className="w-full">
        {/* Header skeleton */}
        <div className="bg-muted/50 px-6 py-4 border-b border-border">
          <div className="grid grid-cols-3 gap-6">
            <Skeleton className="h-3 w-16" />
            <Skeleton className="h-3 w-16 ml-auto" />
            <Skeleton className="h-3 w-20" />
          </div>
        </div>
        {/* Row skeletons */}
        <div className="divide-y divide-border">
          {Array.from({ length: rows }).map((_, i) => (
            <div key={i} className="px-6 py-5">
              <div className="grid grid-cols-3 gap-6 items-center">
                <div className="flex items-center space-x-3">
                  <Skeleton className="h-5 w-5 rounded-full flex-shrink-0" />
                  <Skeleton className="h-4 w-48" />
                </div>
                <div className="text-right">
                  <Skeleton className="h-4 w-32 ml-auto" />
                </div>
                <div className="flex items-center gap-2">
                  <Skeleton className="h-4 w-4" />
                  <Skeleton className="h-4 w-28" />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
