'use client'

import Skeleton from '../Skeleton'

interface PopularLiveGridSkeletonProps {
    count?: number
    inline?: boolean
}

export default function PopularLiveGridSkeleton({ count = 12, inline = false }: PopularLiveGridSkeletonProps) {
    const items = Array.from({ length: count }).map((_, index) => (
        <div key={index} className="bg-transparent rounded-xl">
            {/* 縮略圖 */}
            <Skeleton variant="rectangular" className="aspect-video rounded-2xl mb-3" />

            {/* 主播資訊 */}
            <div className="flex">
                <Skeleton variant="circular" width={40} height={40} className="flex-shrink-0" />
                <div className="ml-3 flex-1 min-w-0">
                    <div className="flex items-center justify-between mb-2">
                        <Skeleton variant="text" width={80} height={16} />
                        <Skeleton variant="circular" width={20} height={20} />
                    </div>
                    <Skeleton variant="text" width="100%" height={16} className="mb-1" />
                    <Skeleton variant="text" width="80%" height={16} className="mb-2" />
                    <div className="flex gap-2">
                        <Skeleton variant="text" width={60} height={20} className="rounded-full" />
                        <Skeleton variant="text" width={50} height={20} className="rounded-full" />
                    </div>
                </div>
            </div>
        </div>
    ))

    if (inline) {
        return <>{items}</>
    }

    return <div className="grid-popular mt-4">{items}</div>
}