'use client'

import Skeleton from '../Skeleton'

export default function ExploreCategoryGridSkeleton({ count = 12 }: { count?: number }) {
    return (
        <div className="category_conts mt-4">
            <ul className="grid gap-5 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-7">
                {Array.from({ length: count }).map((_, idx) => (
                    <li key={idx} className="group">
                        <div className="block relative">
                            <Skeleton
                                variant="rectangular"
                                className="relative overflow-hidden rounded-2xl aspect-[3/4] bg-gray-200 dark:bg-[#232529]"
                                animation="shimmer"
                            />
                        </div>
                        <div className="info_wrap mt-2">
                            <Skeleton variant="text" width="90%" height={16} className="mb-2" animation="shimmer" />
                        </div>
                        <div className="flex flex-wrap gap-2 mt-2">
                            <Skeleton variant="text" width={60} height={20} className="rounded-full" animation="shimmer" />
                            <Skeleton variant="text" width={70} height={20} className="rounded-full" animation="shimmer" />
                        </div>
                    </li>
                ))}
            </ul>
        </div>
    )
}