import ProductCardSkeleton from "./product-card-skeleton";

interface ProductGridSkeletonProps {
    /** Number of skeleton cards to render (default 8) */
    count?: number;
    /** Optional section title skeleton */
    showTitle?: boolean;
}

/**
 * Grid of ProductCard skeletons for use as a loading placeholder
 * on the homepage product sections and category pages.
 */
export default function ProductGridSkeleton({
    count = 8,
    showTitle = true,
}: ProductGridSkeletonProps) {
    return (
        <section className="relative w-full mb-8">
            {/* Section title skeleton */}
            {showTitle && (
                <div className="flex items-center justify-between mb-6">
                    <div className="skeleton h-7 w-40 rounded-lg" />
                    <div className="flex items-center gap-2">
                        <div className="skeleton w-10 h-10 rounded-full" />
                        <div className="skeleton w-10 h-10 rounded-full" />
                    </div>
                </div>
            )}

            {/* Cards grid */}
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 2xl:grid-cols-5 gap-3">
                {Array.from({ length: count }).map((_, i) => (
                    <ProductCardSkeleton key={i} />
                ))}
            </div>
        </section>
    );
}