'use client'

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

interface RankHeaderProps {
    activeType: RankType
}

export default function RankHeader({ activeType }: RankHeaderProps) {
    const { t } = useTranslation()

    const getTitle = () => {
        if (activeType === 'gift') return t('rank.gift.title')
        if (activeType === 'rich') return t('rank.rich.title')
        if (activeType === 'group') return t('rank.group.title')
        return t('rank.title')
    }

    const getHelpText = () => {
        if (activeType === 'gift') return t('rank.gift.help')
        if (activeType === 'rich') return t('rank.rich.help')
        if (activeType === 'group') return t('rank.group.help')
        return ''
    }

    return (
        <div className="flex items-center gap-2">
            <h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-black dark:text-white">
                {getTitle()}
            </h2>
            <div className="group relative">
                <FiHelpCircle className="w-4 h-4 text-black dark:text-white cursor-help" />
                <div className="absolute left-0 bottom-full mb-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-10">
                    {getHelpText()}
                </div>
            </div>
        </div>
    )
}