<script lang="ts">
	import { toggleMode } from 'mode-watcher';

	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
	import { buttonVariants } from '$lib/components/ui/button/button.svelte';
	import Sun from '@lucide/svelte/icons/sun';
	import Moon from '@lucide/svelte/icons/moon';

	let { class: className = '' }: { class?: string } = $props();
</script>

<!--
	Which icon shows is decided by CSS off the `dark` class, not by reading
	`mode.current` in the markup. The server cannot know the mode, so a
	`{#if mode.current === 'light'}` renders the wrong branch during SSR and
	visibly swaps on hydration.
-->
<Tooltip.Provider>
	<Tooltip.Root>
		<Tooltip.Trigger
			onclick={toggleMode}
			class="{buttonVariants({ variant: 'ghost', size: 'icon' })} scale-110 {className}"
		>
			<Moon class="scale-110 dark:hidden" />
			<Sun class="hidden scale-110 dark:block" />
			<span class="sr-only">Toggle light and dark mode</span>
		</Tooltip.Trigger>

		<Tooltip.Content>
			<p class="dark:hidden">Dark Mode</p>
			<p class="hidden dark:block">Light Mode</p>
		</Tooltip.Content>
	</Tooltip.Root>
</Tooltip.Provider>
