<script lang="ts">
	import DropdownItem from "#lib/components/ui/DropdownItem.svelte";
	import ThemeChip from "#lib/components/settings/ThemeChip.svelte";
	import Check from "$icon/check";
	import { themeLabel, type Theme } from "#lib/theme.ts";

	interface Props {
		theme: Theme;
		selected?: boolean;
		onselect?: (theme: Theme) => void;
	}

	let { theme, selected = false, onselect }: Props = $props();
</script>

<DropdownItem class="[&>span]:w-full" onclick={() => onselect?.(theme)}>
	<span class="flex w-full items-center gap-xs">
		<ThemeChip {theme} />
		<span class="flex-1">{themeLabel(theme)}</span>
		{#if selected}
			<Check class="size-3.5 shrink-0 text-foreground-default" aria-hidden="true" />
		{/if}
	</span>
</DropdownItem>