<script lang="ts">
	import { theme } from '$lib/stores/theme.svelte';
	import { iconButton } from '$lib/ui/classes';

	const isDark = $derived(theme.resolved === 'dark');
	const nextLabel = $derived(isDark ? 'Switch to light theme' : 'Switch to dark theme');
	// "Following your system" matters: it is the difference between a pinned
	// preference and one that will change under the user later.
	const title = $derived(
		theme.preference === 'system'
			? `Following your system (${theme.resolved}). ${nextLabel}.`
			: nextLabel
	);
</script>

<button
	type="button"
	onclick={() => theme.toggle()}
	class={iconButton}
	aria-label={nextLabel}
	{title}
>
	{#if isDark}
		<!-- Sun: clicking moves to light -->
		<svg
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			stroke-width="1.8"
			stroke-linecap="round"
			class="size-4"
			aria-hidden="true"
		>
			<circle cx="12" cy="12" r="4" />
			<path
				d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4"
			/>
		</svg>
	{:else}
		<!-- Moon: clicking moves to dark -->
		<svg
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			stroke-width="1.8"
			stroke-linecap="round"
			stroke-linejoin="round"
			class="size-4"
			aria-hidden="true"
		>
			<path d="M21 12.8A8.5 8.5 0 1 1 11.2 3a6.6 6.6 0 0 0 9.8 9.8Z" />
		</svg>
	{/if}
</button>
