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

export interface SearchResultsSkeletonProps {
  count?: number;
}

export function SearchResultsSkeleton({ count = 8 }: SearchResultsSkeletonProps) {
  return (
    <div
      aria-hidden="true"
      role="presentation"
      className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4"
    >
      {Array.from({ length: count }).map((_, i) => (
        <div
          key={i}
          className="flex flex-col gap-2 overflow-hidden rounded-2xl border border-[var(--color-border-default)]"
        >
          <Skeleton className="aspect-[4/3] w-full rounded-none" />
          <div className="flex flex-col gap-1.5 p-2">
            <Skeleton variant="text" className="w-3/4" />
            <Skeleton variant="text" className="w-1/2" />
          </div>
        </div>
      ))}
    </div>
  );
}