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

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="font-sans tracking-widest transition-colors
               {activeLocale === locale ? 'font-bold text-ink' : 'font-normal text-ink-3 hover:text-ink'}"
	>
		{locale}
	</button>
{/each}
