<script lang="ts">
	import { t } from '$lib/i18n/store.svelte';
	import { getLang, setLang, type Lang } from '$lib/i18n/store.svelte';
</script>

<div class="lang-switch" role="group" aria-label="Langue / Lang">
	{#each ['fr', 'gcf'] as l (l)}
		<button
			type="button"
			class:actif={getLang() === l}
			aria-pressed={getLang() === l}
			onclick={() => setLang(l as Lang)}
		>
			{t().langue[l as Lang]}
		</button>
	{/each}
</div>

<style>
	.lang-switch {
		display: flex;
		gap: 0.25rem;
		background: var(--oki-vert-doux);
		border-radius: 999px;
		padding: 0.2rem;
	}

	button {
		border: none;
		background: transparent;
		color: var(--oki-vert);
		border-radius: 999px;
		padding: 0.3rem 0.75rem;
		font-size: 0.85rem;
		font-weight: 600;
		cursor: pointer;
	}

	button.actif {
		background: var(--oki-vert);
		color: #fff;
	}
</style>
