import { useTranslation } from 'react-i18next';
import { Languages } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuCheck,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
    changeLanguage,
    LANGUAGE_LABELS,
    SUPPORTED_LANGUAGES,
    type SupportedLanguage,
} from '@/i18n/config';

/** Language selector for the topbar; lazy-loads the chosen locale (Q4-B). */
export function LanguageSwitcher() {
    const { t, i18n } = useTranslation();
    const current = (i18n.resolvedLanguage ?? 'en') as SupportedLanguage;

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button
                    variant="ghost"
                    size="icon"
                    aria-label={t('userMenu.language')}
                    data-testid="language-switcher-button"
                >
                    <Languages />
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
                <DropdownMenuLabel>{t('userMenu.language')}</DropdownMenuLabel>
                <DropdownMenuSeparator />
                {SUPPORTED_LANGUAGES.map((lng) => (
                    <DropdownMenuItem
                        key={lng}
                        onSelect={() => {
                            void changeLanguage(lng);
                        }}
                        data-testid={`language-option-${lng}`}
                    >
                        {LANGUAGE_LABELS[lng]}
                        <DropdownMenuCheck checked={current === lng} />
                    </DropdownMenuItem>
                ))}
            </DropdownMenuContent>
        </DropdownMenu>
    );
}