import { useTranslation } from 'react-i18next'
import { GameButton } from './GameButton'
import './LanguageSelector.css'

export function LanguageSelector() {
    const { i18n } = useTranslation()

    const toggleLanguage = () => {
        const newLang = i18n.language.startsWith('es') ? 'en' : 'es'
        i18n.changeLanguage(newLang)
    }

    return (
        <div className="language-selector">
            <GameButton
                variant="secondary"
                size="sm"
                onClick={toggleLanguage}
                className="lang-btn"
                title={i18n.language.startsWith('es') ? "Switch to English" : "Cambiar a Español"}
            >
                <span className="lang-icon">🌐</span>
                <span className="lang-text">{i18n.language.startsWith('es') ? 'ES' : 'EN'}</span>
            </GameButton>
        </div>
    )
}
