'use client'

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

interface RankTypeTabsProps {
    activeType: RankType
    onTypeChange: (type: RankType) => void
}

export default function RankTypeTabs({ activeType, onTypeChange }: RankTypeTabsProps) {
    const { t } = useTranslation()

    return (
        <div className="flex items-center gap-2 sm:gap-4 mb-6 sm:mb-8 flex-wrap">
            <button
                type="button"
                onClick={() => onTypeChange('gift')}
                className={`px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition-all ${activeType === 'gift'
                    ? 'bg-black dark:bg-white text-white dark:text-black shadow-sm'
                    : 'bg-white dark:bg-[#1a1c21] text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
                    }`}
            >
                {t('rank.tabs.gift')}
            </button>
            <button
                type="button"
                onClick={() => onTypeChange('rich')}
                className={`px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition-all ${activeType === 'rich'
                    ? 'bg-black dark:bg-white text-white dark:text-black shadow-sm'
                    : 'bg-white dark:bg-[#1a1c21] text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
                    }`}
            >
                {t('rank.tabs.rich')}
            </button>
            <button
                type="button"
                onClick={() => onTypeChange('group')}
                className={`px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition-all ${activeType === 'group'
                    ? 'bg-black dark:bg-white text-white dark:text-black shadow-sm'
                    : 'bg-white dark:bg-[#1a1c21] text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
                    }`}
            >
                {t('rank.tabs.group')}
            </button>
        </div>
    )
}