<script lang="ts">
	import Dropdown from '$lib/components/ui/Dropdown.svelte';
	import { Palette } from 'lucide-svelte';
	import { AVAILABLE_THEMES } from '$lib/utils/themes';

	let {
		value = 'none',
		onValueChange,
		color
	}: {
		value?: string;
		onValueChange: (theme: string) => void;
		color?: string | null;
	} = $props();

	const themeItems = $derived(
		Object.entries(AVAILABLE_THEMES).map(([key, theme]) => ({
			value: key,
			label: theme.name
		}))
	);
</script>

<Dropdown
	items={themeItems}
	selectedValue={value}
	onSelect={onValueChange}
	{color}
	showCheckmark={true}
	ariaLabel="Select theme pattern"
>
	{#snippet icon()}
		<Palette class="h-[1.2rem] w-[1.2rem]" />
	{/snippet}
</Dropdown>
