import { Dropdown, type MenuProps } from 'antd'
import { useTranslation } from 'react-i18next'

const LANGUAGES = [
    { code: 'en-US', label: 'English' },
    { code: 'zh-CN', label: '简体中文' },
    { code: 'fa-IR', label: 'فارسی' },
]

interface LanguageSwitchProps {
    className?: string
}

export function LanguageSwitch({ className }: LanguageSwitchProps) {
    const { i18n, t } = useTranslation()

    const menuProps: MenuProps = {
        items: LANGUAGES.map((lang) => ({
            key: lang.code,
            label: lang.label,
        })),
        selectedKeys: [i18n.language],
        onClick: ({ key }) => i18n.changeLanguage(key),
    }

    return (
        <Dropdown menu={menuProps} trigger={['click']} placement="bottomRight">
            <button type="button" className={className}>
                {t('components.topbar.language')}
            </button>
        </Dropdown>
    )
}

export default LanguageSwitch