'use client'

import Skeleton from '../Skeleton'

export default function ExploreNewListSkeleton({ count = 6 }: { count?: number }) {
    return (
        <div className="space-y-4">
            {Array.from({ length: count }).map((_, idx) => (
                <div
                    key={idx}
                    className="flex items-center bg-white dark:bg-[#0c0d0e] rounded-lg shadow-sm overflow-hidden border border-gray-200 dark:border-[#2F3137] p-3 md:p-4"
                >
                    <div className="flex-shrink-0 w-56 h-36 relative hidden sm:block">
                        <Skeleton variant="rectangular" className="w-full h-full rounded-lg" animation="shimmer" />
                    </div>
                    <div className="cBox-info flex flex-col flex-grow gap-2 sm:ml-4 w-full">
                        <div className="flex items-center gap-2">
                            <Skeleton variant="circular" width={44} height={44} className="flex-shrink-0" animation="shimmer" />
                            <div className="flex-1">
                                <Skeleton variant="text" width={120} height={14} animation="shimmer" />
                                <Skeleton variant="text" width={80} height={12} className="mt-1" animation="shimmer" />
                            </div>
                            <Skeleton variant="circular" width={28} height={28} className="flex-shrink-0" animation="shimmer" />
                        </div>
                        <Skeleton variant="text" width="95%" height={16} className="mt-1" animation="shimmer" />
                        <Skeleton variant="text" width="80%" height={16} className="mt-1" animation="shimmer" />
                        <div className="flex flex-wrap gap-2 mt-1">
                            <Skeleton variant="text" width={64} height={20} className="rounded-full" animation="shimmer" />
                            <Skeleton variant="text" width={72} height={20} className="rounded-full" animation="shimmer" />
                            <Skeleton variant="text" width={54} height={20} className="rounded-full" animation="shimmer" />
                        </div>
                    </div>
                </div>
            ))}
        </div>
    )
}