<script lang="ts">
	import Dropdown from "#lib/components/ui/Dropdown.svelte";
	import SettingsRow from "#lib/components/settings/SettingsRow.svelte";
	import ThemeChip from "#lib/components/settings/ThemeChip.svelte";
	import ThemeOption from "#lib/components/settings/ThemeOption.svelte";
	import ChevronDown from "$icon/chevron-down";
	import { PRESET_NAMES, themeLabel, type Theme } from "#lib/theme.ts";

	interface Props {
		value?: Theme;
	}

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

	const select = (theme: Theme) => (value = theme);
</script>

<SettingsRow title="Interface theme" description="Select a color scheme for the interface.">
	<Dropdown variant="button" align="right" label="Interface theme" menuClass="w-56">
		{#snippet trigger()}
			<ThemeChip theme={value} />
			<span>{themeLabel(value)}</span>
			<ChevronDown class="size-3.5 text-foreground-subtle" aria-hidden="true" />
		{/snippet}
		<ThemeOption theme="auto" selected={value === "auto"} onselect={select} />
		<hr class="border-border-default" />
		{#each PRESET_NAMES as theme (theme)}
			<ThemeOption {theme} selected={value === theme} onselect={select} />
		{/each}
	</Dropdown>
</SettingsRow>