'use client'

import { useTranslation } from 'react-i18next'

interface StarRankToggleProps {
    activePeriod: 'thisWeek' | 'lastWeek'
    onPeriodChange: (period: 'thisWeek' | 'lastWeek') => void
}

export default function StarRankToggle({ activePeriod, onPeriodChange }: StarRankToggleProps) {
    const { t } = useTranslation()

    return (
        <div className="lg:hidden mb-4">
            <div className="flex items-center gap-2 bg-gray-100 dark:bg-gray-800 rounded-lg p-1">
                <button
                    onClick={() => onPeriodChange('thisWeek')}
                    className={`flex-1 px-4 py-2 rounded-md text-sm font-medium transition-all ${activePeriod === 'thisWeek'
                        ? 'bg-black dark:bg-white text-white dark:text-black shadow-sm'
                        : 'text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
                        }`}
                >
                    {t('rank.star.thisWeekShort')}
                </button>
                <button
                    onClick={() => onPeriodChange('lastWeek')}
                    className={`flex-1 px-4 py-2 rounded-md text-sm font-medium transition-all ${activePeriod === 'lastWeek'
                        ? 'bg-black dark:bg-white text-white dark:text-black shadow-sm'
                        : 'text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
                        }`}
                >
                    {t('rank.star.lastWeekShort')}
                </button>
            </div>
        </div>
    )
}