<script lang="ts">
import { setLocale, getLocale } from '$lib/paraglide/runtime';

let { inverted = false }: { inverted?: boolean } = $props();

const locales = ['DE', 'EN', 'ES'] as const;
const localeMap = { DE: 'de', EN: 'en', ES: 'es' } as const;
const activeLocale = $derived(getLocale().toUpperCase());
</script>

{#each locales as locale (locale)}
	<button
		type="button"
		onclick={() => setLocale(localeMap[locale])}
		class="rounded px-1 font-sans tracking-widest transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring
               {activeLocale === locale
			? inverted
				? 'font-bold text-white'
				: 'font-bold text-ink'
			: inverted
				? 'font-normal text-white/70 hover:text-white'
				: 'font-normal text-ink-3 hover:text-ink'}"
	>
		{locale}
	</button>
{/each}
