<!--
  Task 12: Theme toggle component for dark/light/system modes.
-->
<script lang="ts">
	import { themeMode, setThemeMode, type ThemeMode } from '$lib/stores/theme';
	import { t } from '$lib/i18n';
	import { IconSun, IconMoon, IconMonitor } from '$lib/components/icons';

	const modes: ThemeMode[] = ['light', 'dark', 'system'];
</script>

<div class="flex items-center gap-0.5 rounded-lg border border-[var(--border-primary)] bg-[var(--surface-card)] p-0.5">
	{#each modes as mode}
		<button
			type="button"
			class="flex items-center justify-center rounded-md p-1.5 transition-all duration-150
				{$themeMode === mode
					? 'bg-[var(--color-brand-100)] text-[var(--color-brand-700)] shadow-sm'
					: 'text-[var(--text-tertiary)] hover:text-[var(--text-secondary)]'}"
			onclick={() => setThemeMode(mode)}
			title={$t(`theme.${mode}`)}
		>
			{#if mode === 'light'}
				<IconSun size={14} />
			{:else if mode === 'dark'}
				<IconMoon size={14} />
			{:else}
				<IconMonitor size={14} />
			{/if}
		</button>
	{/each}
</div>
