<script lang="ts">
	import { Moon, Sun } from 'lucide-svelte';
	import { theme } 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');
			}
			return newTheme
		})
	}
</script>

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

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