// @design-system: feedback/Skeleton
import { Skeleton } from './Skeleton';

export interface VendorReviewsSkeletonProps {
  count?: number;
}

export function VendorReviewsSkeleton({ count = 5 }: VendorReviewsSkeletonProps) {
  return (
    <div
      aria-hidden="true"
      role="presentation"
      className="divide-border-subtle flex flex-col divide-y"
    >
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} className="flex flex-col gap-2 py-4">
          <div className="flex items-center gap-2">
            <Skeleton className="h-4 w-24" />
            <Skeleton variant="text" className="w-16" />
          </div>
          <Skeleton variant="text" className="w-full" />
          <Skeleton variant="text" className="w-3/4" />
        </div>
      ))}
    </div>
  );
}