import { useCatalogLocale, setCatalogLocale } from '@/hooks/use-catalog-locale';
import { CATALOG_LOCALES } from '@/lib/catalog';
import { cn } from '@/lib/utils';

/*
 * DE/FR/IT segmented control (IA §6). Changes data display only — UI copy
 * stays German. Persisted client-side via localStorage.catalogLocale, so it
 * re-renders every localized name on the page without navigation.
 */
export function LocaleSwitch() {
    const locale = useCatalogLocale();

    return (
        <div className="flex items-center gap-0.5 rounded-lg bg-slate-200 p-0.5">
            {CATALOG_LOCALES.map((code) => (
                <button
                    key={code}
                    type="button"
                    onClick={() => setCatalogLocale(code)}
                    aria-pressed={locale === code}
                    className={cn(
                        'inline-flex h-[22px] cursor-pointer items-center rounded-md px-2.5 text-[10px] font-bold tracking-widest uppercase transition-all select-none',
                        locale === code
                            ? 'bg-white text-astara-purple shadow-sm'
                            : 'text-slate-500 hover:text-astara-purple',
                    )}
                >
                    {code}
                </button>
            ))}
        </div>
    );
}