'use client';

interface Props {
  count?: number;
}

export default function SliderThumbSkeleton({ count = 3 }: Props) {
  return (
    <div className="flex gap-4 overflow-hidden">
      {Array.from({ length: count }).map((_, i) => (
        <div
          key={i}
          className="flex w-full animate-pulse flex-col gap-4 overflow-hidden rounded-xl bg-white"
        >
          <div className="aspect-[1.09] w-full bg-gray-200" />
          <div className="mx-auto mb-4 h-4 w-3/4 rounded bg-gray-200" />
        </div>
      ))}
    </div>
  );
}
