<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>

<header class="bg-brand-navy">
	<div class="h-1 bg-accent"></div>
	<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
		<div class="flex h-12 items-center justify-between">
			<a href="/" class="flex items-center" aria-label="Familienarchiv">
				<span class="font-sans text-sm font-bold tracking-widest text-white uppercase"
					>Familienarchiv</span
				>
			</a>
			<div class="flex items-center gap-1">
				{#each locales as locale (locale)}
					<button
						type="button"
						onclick={() => setLocale(localeMap[locale])}
						class="px-1.5 py-1 font-sans text-xs tracking-widest transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
                            {activeLocale === locale
							? 'font-bold text-white'
							: 'font-normal text-white/55 hover:text-white/85'}"
					>
						{locale}
					</button>
				{/each}
			</div>
		</div>
	</div>
</header>
