<script lang="ts">
	import SunIcon from "~icons/solar/sun-broken";
	import MoonIcon from "~icons/solar/moon-sleep-broken";
	import { resetMode, setMode, mode } from "mode-watcher";
	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
	import { buttonVariants } from "$lib/components/ui/button/index.js";
	import { cn } from "$lib/utils";
	import Icon from "./icon.svelte";

	interface Props {
		expanded?: boolean;
	}

	let { expanded = false }: Props = $props();
</script>

<DropdownMenu.Root>
	<DropdownMenu.Trigger
		class={cn(
			buttonVariants({
				variant: "ghost",
				size: expanded ? "default" : "icon",
			}),
			expanded ? "w-full justify-start" : "",
		)}
	>
		{#if $mode === "light"}
			<Icon
				icon={SunIcon}
				cls="h-6 w-auto rotate-0 scale-100 dark:-rotate-90 dark:scale-0"
			/>
		{:else}
			<Icon
				icon={MoonIcon}
				cls="h-6 w-auto rotate-90 scale-0 dark:rotate-0 dark:scale-100"
			/>
		{/if}

		{#if expanded}
			<p>Theme</p>
		{/if}
	</DropdownMenu.Trigger>
	<DropdownMenu.Content align="end">
		<DropdownMenu.Item onclick={() => setMode("light")}
			>Light</DropdownMenu.Item
		>
		<DropdownMenu.Item onclick={() => setMode("dark")}>Dark</DropdownMenu.Item
		>
		<DropdownMenu.Item onclick={() => resetMode()}>System</DropdownMenu.Item>
	</DropdownMenu.Content>
</DropdownMenu.Root>
