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

/**
 * Stats skeleton for the subscription detail page.
 * Shows 4 columns: Status, Amount, Next Due, Registration.
 */
export function SubscriptionDetailStatsSkeleton() {
  return (
    <div className="bg-card border border-border rounded-2xl shadow-sm overflow-hidden">
      <div className="px-6 py-5 grid grid-cols-2 md:grid-cols-4 gap-6">
        <div>
          <Skeleton className="h-3 w-24 mb-2" />
          <Skeleton className="h-7 w-20 rounded-full" />
        </div>
        <div>
          <Skeleton className="h-3 w-24 mb-2" />
          <Skeleton className="h-8 w-28" />
        </div>
        <div>
          <Skeleton className="h-3 w-24 mb-2" />
          <Skeleton className="h-6 w-32" />
        </div>
        <div>
          <Skeleton className="h-3 w-28 mb-2" />
          <Skeleton className="h-6 w-32" />
        </div>
      </div>
    </div>
  );
}
