'use client'

interface RecommendedStream {
    id: string
    streamerName: string
    viewerCount: number
    thumbnail?: string
}

export default function FeaturedStream() {
    const recommendedStreams: RecommendedStream[] = [
        { id: '1', streamerName: '主播1', viewerCount: 643 },
        { id: '2', streamerName: '主播2', viewerCount: 1331 },
        { id: '3', streamerName: '主播3', viewerCount: 542 },
        { id: '4', streamerName: '主播4', viewerCount: 486 },
    ]

    return (
        <div className="mb-6 md:mb-8">
            <div className="flex flex-col lg:flex-row gap-4">
                {/* 主影片播放器 */}
                <div className="flex-1 w-full">
                    <div className="relative aspect-video bg-gray-200 rounded-lg overflow-hidden border border-gray-300">
                        <div className="absolute inset-0 flex items-center justify-center">
                            <div className="text-center">
                                <div className="w-12 h-12 md:w-16 md:h-16 border-4 border-gray-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
                                <span className="text-gray-600 text-sm md:text-base">載入中...</span>
                            </div>
                        </div>
                        {/* 直播時間 */}
                        <div className="absolute top-2 left-2 md:top-4 md:left-4 bg-black bg-opacity-70 text-white px-2 py-0.5 md:px-3 md:py-1 rounded text-xs md:text-sm font-mono">
                            00:17:07
                        </div>
                        {/* 直播 標籤 */}
                        <div className="absolute top-2 right-2 md:top-4 md:right-4 bg-red-500 text-white px-2 py-0.5 md:px-3 md:py-1 rounded text-xs md:text-sm font-semibold">
                            直播
                        </div>
                    </div>
                    <div className="mt-3 md:mt-4">
                        <h2 className="text-lg md:text-xl font-bold text-black mb-1">主播1</h2>
                        <p className="text-black mb-2 text-sm md:text-base">終於今天了...</p>
                        <span className="inline-block bg-gray-200 text-black px-2 py-1 md:px-3 md:py-1 rounded text-xs md:text-sm">
                            測試分類
                        </span>
                    </div>
                </div>

                {/* 推薦直播列表 */}
                <div className="w-full lg:w-64 space-y-2 md:space-y-3">
                    <div className="hidden lg:block">
                        {recommendedStreams.map((stream) => (
                            <div
                                key={stream.id}
                                className="bg-gray-100 rounded-lg overflow-hidden hover:bg-gray-200 transition-colors cursor-pointer border border-gray-200 mb-3"
                            >
                                <div className="aspect-video bg-gray-200 relative">
                                    <div className="absolute inset-0 flex items-center justify-center">
                                        <span className="text-gray-500 text-xs">縮略圖</span>
                                    </div>
                                    <div className="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white px-2 py-1 rounded text-xs">
                                        {stream.viewerCount.toLocaleString()}
                                    </div>
                                </div>
                                <div className="p-2">
                                    <p className="text-black text-sm font-medium truncate">
                                        {stream.streamerName}
                                    </p>
                                    <p className="text-gray-600 text-xs mt-1">
                                        {stream.viewerCount.toLocaleString()} 參與
                                    </p>
                                </div>
                            </div>
                        ))}
                    </div>
                    {/* 手機端橫向滾動 */}
                    <div className="lg:hidden flex gap-3 overflow-x-auto pb-2 -mx-4 px-4">
                        {recommendedStreams.map((stream) => (
                            <div
                                key={stream.id}
                                className="bg-gray-100 rounded-lg overflow-hidden hover:bg-gray-200 transition-colors cursor-pointer border border-gray-200 flex-shrink-0 w-40"
                            >
                                <div className="aspect-video bg-gray-200 relative">
                                    <div className="absolute inset-0 flex items-center justify-center">
                                        <span className="text-gray-500 text-xs">縮略圖</span>
                                    </div>
                                    <div className="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white px-2 py-1 rounded text-xs">
                                        {stream.viewerCount.toLocaleString()}
                                    </div>
                                </div>
                                <div className="p-2">
                                    <p className="text-black text-sm font-medium truncate">
                                        {stream.streamerName}
                                    </p>
                                    <p className="text-gray-600 text-xs mt-1">
                                        {stream.viewerCount.toLocaleString()} 參與
                                    </p>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    )
}