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

export interface FavoritesSkeletonProps {
  count?: number;
}

export function FavoritesSkeleton({ count = 6 }: FavoritesSkeletonProps) {
  return (
    <ul aria-hidden="true" role="presentation" className="divide-border-subtle divide-y">
      {Array.from({ length: count }).map((_, i) => (
        <li key={i} className="flex items-center justify-between gap-4 py-4">
          <div className="flex items-center gap-3">
            <Skeleton className="h-16 w-16 shrink-0 rounded-xl" />
            <div className="flex flex-col gap-2">
              <Skeleton variant="text" className="w-36" />
              <Skeleton variant="text" className="w-24" />
            </div>
          </div>
          <Skeleton variant="circle" className="size-8 shrink-0" />
        </li>
      ))}
    </ul>
  );
}