<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>

<!-- three 135px thumbnails need 437px, so on a phone they wrap two-up and Dark
     drops onto a second line -->
<div class="flex w-full flex-wrap gap-4 sm:w-auto">
	<label class="flex w-33.75 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-33.75 cursor-pointer flex-col gap-2">
		<ThemePreview palette="light" />
		<Radio value="light" bind:group={value} {name}>Light</Radio>
	</label>

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