<!--
  Task 13: Locale switcher component.
-->
<script lang="ts">
	import { locale, setLocale, availableLocales, type Locale } from '$lib/i18n';
	import { IconGlobe } from '$lib/components/icons';
</script>

<div class="flex items-center gap-1.5">
	<IconGlobe size={14} class="text-[var(--text-tertiary)]" />
	<div class="flex items-center gap-0.5 rounded-lg border border-[var(--border-primary)] bg-[var(--surface-card)] p-0.5">
		{#each availableLocales as loc}
			<button
				type="button"
				class="rounded-md px-2 py-0.5 text-xs font-medium transition-all duration-150
					{$locale === loc
						? 'bg-[var(--color-brand-100)] text-[var(--color-brand-700)] shadow-sm'
						: 'text-[var(--text-tertiary)] hover:text-[var(--text-secondary)]'}"
				onclick={() => setLocale(loc)}
			>
				{loc.toUpperCase()}
			</button>
		{/each}
	</div>
</div>
