export function ProductCardSkeleton() {
  return (
    <div className="animate-pulse">
      <div className="aspect-square rounded-xl bg-black/[0.06]" />
      <div className="mt-3 h-3.5 w-3/4 rounded bg-black/[0.06]" />
      <div className="mt-2 h-3.5 w-1/2 rounded bg-black/[0.06]" />
      <div className="mt-2 h-4 w-2/5 rounded bg-black/[0.06]" />
    </div>
  );
}

export function ProductGridSkeleton({ count = 8 }: { count?: number }) {
  return (
    <div className="grid grid-cols-2 gap-x-4 gap-y-7 sm:grid-cols-3 lg:grid-cols-4">
      {Array.from({ length: count }).map((_, i) => (
        <ProductCardSkeleton key={i} />
      ))}
    </div>
  );
}