'use client'

import { useTranslation } from 'react-i18next'
import { FiHelpCircle } from 'react-icons/fi'
import type { StarRankItem } from './types'
import StarRankCard from './StarRankCard'

interface StarRankSectionProps {
    title: string
    helpText: string
    items: StarRankItem[]
    isLoading: boolean
}

export default function StarRankSection({ title, helpText, items, isLoading }: StarRankSectionProps) {
    const { t } = useTranslation()

    return (
        <div className="flex-1 min-w-0">
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0 border-b border-[#e6e5e5] dark:border-gray-800 pb-2 mb-4 sm:mb-6">
                <div className="flex items-center gap-2">
                    <h3 className="text-lg sm:text-xl font-bold text-black dark:text-white">
                        {title}
                    </h3>
                    <div className="group relative z-20">
                        <FiHelpCircle className="w-4 h-4 text-black dark:text-white cursor-help" />
                        <div className="absolute left-0 top-full mt-2 hidden group-hover:block w-[170px] bg-white dark:bg-[#1a1c21] border border-gray-300 dark:border-gray-600 rounded px-3 py-2 text-sm text-black dark:text-white shadow-lg z-30">
                            {helpText}
                        </div>
                    </div>
                </div>
            </div>
            {isLoading ? (
                <div className="space-y-4">
                    {Array.from({ length: 3 }).map((_, idx) => (
                        <div key={idx} className="h-[100px] bg-white dark:bg-[#1a1c21] border border-[#e6e5e5] dark:border-gray-800 rounded animate-pulse" />
                    ))}
                </div>
            ) : (
                <ul className="space-y-3">
                    {items.map((item) => (
                        <StarRankCard key={item.rank} item={item} />
                    ))}
                    {items.length === 0 && (
                        <div className="text-center py-12 text-gray-500 dark:text-gray-400">
                            {t('rank.noData')}
                        </div>
                    )}
                </ul>
            )}
        </div>
    )
}