import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { useCurrency } from '@/hooks/useCurrency';
import { cn } from '@/lib/utils';
import { Check, ChevronDown, Globe } from 'lucide-react';

/**
 * Compact display-currency switcher fed by the shared `currency` Inertia
 * prop. Hidden when only one currency is enabled.
 */
export default function CurrencySelector({
    className,
}: {
    className?: string;
}) {
    const { current, available, setCurrency } = useCurrency();

    if (available.length <= 1) return null;

    return (
        <DropdownMenu>
            <DropdownMenuTrigger
                aria-label="Select currency"
                className={cn(
                    'text-muted-foreground hover:bg-accent hover:text-accent-foreground flex items-center gap-1.5 rounded-xl px-2.5 py-2 text-sm font-medium transition-colors outline-none',
                    className,
                )}
            >
                <Globe className="h-4 w-4" />
                <span className="tabular-nums">{current.code}</span>
                <ChevronDown className="h-3 w-3 opacity-60" />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="min-w-[200px]">
                {available.map((c) => (
                    <DropdownMenuItem
                        key={c.code}
                        onSelect={() => setCurrency(c.code)}
                        className="flex items-center gap-2"
                    >
                        <span className="text-muted-foreground w-8 shrink-0 text-xs font-semibold tabular-nums">
                            {c.code}
                        </span>
                        <span className="flex-1 truncate">{c.name}</span>
                        {c.code === current.code && (
                            <Check className="text-primary h-3.5 w-3.5 shrink-0" />
                        )}
                    </DropdownMenuItem>
                ))}
            </DropdownMenuContent>
        </DropdownMenu>
    );
}