'use client'

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

interface PeriodTabsProps {
    activePeriod: Period
    onPeriodChange: (period: Period) => void
}

export default function PeriodTabs({ activePeriod, onPeriodChange }: PeriodTabsProps) {
    const { t } = useTranslation()

    return (
        <div className="flex items-center">
            <div className="inline-flex rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 bg-white dark:bg-[#1a1c21]">
                <button
                    type="button"
                    onClick={() => onPeriodChange('day')}
                    className={`px-4 sm:px-6 py-1.5 sm:py-2 text-xs sm:text-sm font-medium transition-all ${activePeriod === 'day'
                        ? 'bg-black dark:bg-white text-white dark:text-black shadow-sm'
                        : 'text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white'
                        }`}
                >
                    {t('rank.period.day')}
                </button>
                <button
                    type="button"
                    onClick={() => onPeriodChange('week')}
                    className={`px-4 sm:px-6 py-1.5 sm:py-2 text-xs sm:text-sm font-medium transition-all border-l border-r border-gray-200 dark:border-gray-700 ${activePeriod === 'week'
                        ? 'bg-black dark:bg-white text-white dark:text-black shadow-sm'
                        : 'text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white'
                        }`}
                >
                    {t('rank.period.week')}
                </button>
                <button
                    type="button"
                    onClick={() => onPeriodChange('month')}
                    className={`px-4 sm:px-6 py-1.5 sm:py-2 text-xs sm:text-sm font-medium transition-all ${activePeriod === 'month'
                        ? 'bg-black dark:bg-white text-white dark:text-black shadow-sm'
                        : 'text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white'
                        }`}
                >
                    {t('rank.period.month')}
                </button>
            </div>
        </div>
    )
}