<script lang="ts">
	import { toggleMode, mode } 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>

<Tooltip.Provider>
	<Tooltip.Root>
		<Tooltip.Trigger
			onclick={toggleMode}
			class="{buttonVariants({ variant: 'ghost', size: 'icon' })} scale-110 {className}"
		>
			{#if mode.current === 'light'}
				<Moon class="scale-110" />
			{:else}
				<Sun class="scale-110" />
			{/if}
		</Tooltip.Trigger>

		<Tooltip.Content>
			{#if mode.current === 'light'}
				<p>Dark Mode</p>
			{:else}
				<p>Light Mode</p>
			{/if}
		</Tooltip.Content>
	</Tooltip.Root>
</Tooltip.Provider>
