import {
    DropdownMenuGroup,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuSub,
    DropdownMenuSubContent,
    DropdownMenuSubTrigger,
} from '@/components/ui/dropdown-menu';
import { useTranslation } from '@/hooks/use-translation';
import { router } from '@inertiajs/react';
import { Check, Globe } from 'lucide-react';

interface LanguageDropdownProps {
    currentLocale: string;
}

const languages = [
    { code: 'pl', name: 'Polski', flag: '🇵🇱' },
    { code: 'en', name: 'English', flag: '🇬🇧' },
];

export function LanguageDropdown({ currentLocale }: LanguageDropdownProps) {
    const { t } = useTranslation();
    
    const handleLanguageChange = (locale: string) => {
        router.post('/locale', { locale }, {
            preserveScroll: true,
            preserveState: true,
        });
    };

    return (
        <DropdownMenuSub>
            <DropdownMenuSubTrigger>
                <Globe className="mr-2" />
                <span>{t('messages.language', 'Language')}</span>
            </DropdownMenuSubTrigger>
            <DropdownMenuSubContent>
                {languages.map((lang) => (
                    <DropdownMenuItem
                        key={lang.code}
                        onClick={() => handleLanguageChange(lang.code)}
                        className="cursor-pointer"
                    >
                        <span className="mr-2">{lang.flag}</span>
                        <span className="flex-1">{lang.code === 'pl' ? t('messages.polish', 'Polish') : t('messages.english', 'English')}</span>
                        {currentLocale === lang.code && (
                            <Check className="ml-2 h-4 w-4" />
                        )}
                    </DropdownMenuItem>
                ))}
            </DropdownMenuSubContent>
        </DropdownMenuSub>
    );
}