"use client";

import { useTranslation } from "@/lib/i18n";
import { Button } from "@/components/ui/button";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Globe } from "lucide-react";

export function LanguageSwitcher() {
    const { locale, setLocale } = useTranslation();

    const locales = [
        { code: "en" as const, name: "English", flag: "🇺🇸" },
        { code: "es" as const, name: "Español", flag: "🇪🇸" },
        { code: "pt-BR" as const, name: "Português", flag: "🇧🇷" },
    ];

    const currentLocale = locales.find((l) => l.code === locale) || locales[0];

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="w-12 px-0 gap-2 focus-visible:ring-0 focus-visible:ring-offset-0 hover:bg-white/10">
                    <Globe className="h-5 w-5 text-white/90 hover:text-white transition-colors" />
                    <span className="sr-only">Toggle language</span>
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
                {locales.map((l) => (
                    <DropdownMenuItem
                        key={l.code}
                        onSelect={() => {
                            console.log(`[LanguageSwitcher] Selecting ${l.code}`);
                            setLocale(l.code);
                        }}
                        className="flex items-center gap-2 cursor-pointer focus:outline-none focus:bg-accent focus:text-accent-foreground"
                    >
                        <span className="text-lg">{l.flag}</span>
                        <span>{l.name}</span>
                        {locale === l.code && <span className="ml-auto text-xs opacity-50">✓</span>}
                    </DropdownMenuItem>
                ))}
            </DropdownMenuContent>
        </DropdownMenu>
    );
}