<script lang="ts">
	import Radio from "$lib/components/ui/Radio.svelte";
	import ThemePreview from "./ThemePreview.svelte";
	import SunMoon from "$icon/sun-moon";

	interface Props {
		value?: "auto" | "light" | "dark";
	}

	let { value = $bindable("light") }: Props = $props();

	const name = $props.id();
</script>

<div class="flex gap-4">
	<label class="flex w-[135px] cursor-pointer flex-col gap-2">
		<!-- Auto is the one thumbnail that tracks the live theme, since that is
		     exactly what the option does -->
		<span
			class="flex aspect-[135/84] w-full items-center justify-center rounded-sm border border-border-default bg-background-default"
			aria-hidden="true"
		>
			<SunMoon class="size-6 text-foreground-muted" />
		</span>
		<Radio value="auto" bind:group={value} {name}>Auto</Radio>
	</label>

	<label class="flex w-[135px] cursor-pointer flex-col gap-2">
		<ThemePreview palette="light" />
		<Radio value="light" bind:group={value} {name}>Light</Radio>
	</label>

	<label class="flex w-[135px] cursor-pointer flex-col gap-2">
		<ThemePreview palette="dark" />
		<Radio value="dark" bind:group={value} {name}>Dark</Radio>
	</label>
</div>
