'use client'

import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import PopularLiveGridSkeleton from './Skeletons/PopularLiveGridSkeleton'
import LiveCard, { LiveStream } from './LiveCard'
import { usePopularLiveStreams } from '@/contexts/StreamsWsContext'

export default function PopularLiveGrid() {
    const { streams: popularStreams, ready } = usePopularLiveStreams(12)
    const { t } = useTranslation()
    const isLoading = !ready && popularStreams.length === 0

    const streams: LiveStream[] = useMemo(
        () =>
            popularStreams.map((s) => ({
                id: s.id,
                streamerName: s.streamerName,
                title: s.title,
                category: s.category,
                viewerCount: s.viewerCount,
                thumbnail: s.thumbnail,
                src: s.src,
                isLive: s.isLive,
                avatar: s.avatar,
            })),
        [popularStreams]
    )

    return (
        <div className="px-5 py-5">
            <h2 className="text-xl md:text-2xl font-bold text-black dark:text-white mb-4 md:mb-6 transition-colors">
                {t('popularGrid.title')}
            </h2>
            {isLoading ? (
                <PopularLiveGridSkeleton count={12} />
            ) : streams.length > 0 ? (
                <div className="grid-popular">
                    {streams.map((stream) => (
                        <LiveCard key={stream.id} stream={stream} t={t} />
                    ))}
                </div>
            ) : (
                <div className="text-center py-8 text-gray-500 dark:text-gray-400">
                    {t('popularGrid.empty', '目前沒有熱門直播')}
                </div>
            )}
        </div>
    )
}