<script lang="ts">
	import Moon from "$lib/icons/Moon.svelte"
	import Sun from "$lib/icons/Sun.svelte"
	import { themeState } from "$lib/state.svelte"
	import { onMount } from "svelte"

	// The `themeState` rune can't be imported here so we must explicitly call the setup
	onMount(() => {
		themeState.isDarkMode = localStorage.getItem("darkMode") === "true"
	})
</script>

<button
	on:click={() => {
		themeState.isDarkMode = !themeState.isDarkMode
		document.documentElement.classList.toggle("dark", themeState.isDarkMode)
		localStorage.setItem("darkMode", themeState.isDarkMode ? "true" : "false")
	}}
	class="btn-secondary rounded-full p-2"
	aria-label={themeState.isDarkMode ? "Switch to light mode" : "Switch to dark mode"}
>
	{#if themeState.isDarkMode}
		<Moon />
	{:else}
		<Sun />
	{/if}
</button>
