import type { Locale } from '@/hooks/use-locale';
import { useLocale } from '@/hooks/use-locale';
import { cn } from '@/lib/utils';

const languages: { value: Locale; label: string; name: string }[] = [
    { value: 'id', label: 'ID', name: 'Bahasa Indonesia' },
    { value: 'en', label: 'EN', name: 'English' },
];

/** Two-option switch between Indonesian and English. */
export default function LanguageToggle({ className }: { className?: string }) {
    const { locale, setLocale } = useLocale();

    return (
        <div
            role="group"
            aria-label="Bahasa / Language"
            className={cn(
                'border-outline-variant/50 bg-surface-container-low inline-flex h-10 items-center gap-0.5 rounded-xl border p-1',
                className,
            )}
        >
            {languages.map((language) => (
                <button
                    key={language.value}
                    type="button"
                    lang={language.value}
                    title={language.name}
                    aria-pressed={locale === language.value}
                    onClick={() => setLocale(language.value)}
                    className={cn(
                        'h-full cursor-pointer rounded-lg px-2.5 font-mono text-xs font-bold transition-colors',
                        locale === language.value
                            ? 'bg-primary-container text-white'
                            : 'text-on-surface-variant hover:text-on-surface',
                    )}
                >
                    {language.label}
                </button>
            ))}
        </div>
    );
}