<script lang="ts">
	import { Moon, Sun } from 'lucide-svelte';
	import { theme, setTheme } from '$lib/theme'

	function toggleTheme() {
		theme.update((currentTheme) => {
			const newTheme = currentTheme === 'tokiwa' ? 'star' : 'tokiwa'

			document.documentElement.setAttribute('color-scheme', newTheme)
			localStorage.setItem('color-scheme', newTheme)

			if (newTheme === "tokiwa") {
				document.documentElement.classList.remove('dark');
			} else {
				document.documentElement.classList.add('dark');
			}
			setTheme(newTheme);
			return newTheme
		})
	}
</script>

<button
	id="theme-switch"
	class="nav-link"
	on:click={toggleTheme} aria-label="Toggle Theme">
	{#if $theme === "tokiwa"}
		<Sun />
	{:else}
		<Moon />
	{/if}
</button>

<style>
	button {
		flex-shrink: 0;
		padding: 0;
		font-weight: inherit;
		background: none;
		border: none;
		box-shadow: none;
		overflow: hidden;
	}
</style>
