<script lang="ts">
	import type { Snippet } from 'svelte';

	let {
		children,
		id,
		name,
		value = $bindable(),
		label,
		notice,
		required = false,
		disabled = false,
		size = 'md',
		pickyWidth = true,
		onChange
	}: {
		children: Snippet;
		id?: string;
		name?: string;
		value?: any;
		label?: string;
		notice?: string;
		required?: boolean;
		disabled?: boolean;
		size?: 'xs' | 'sm' | 'md' | 'lg';
		pickyWidth?: boolean;
		onChange?: ({ value }: { value: any }) => void;
	} = $props();
</script>

<div>
	{#if label}
		<label class="label" for={id}>
			<span class="label-text">
				{label}
				{#if required}
					<span class="text-red-700">*</span>
				{/if}
			</span>
		</label>
	{/if}
	<select
		class="select select-bordered w-[100%]"
		class:sm:max-w-[16rem]={pickyWidth}
		class:select-xs={size === 'xs'}
		class:select-sm={size === 'sm'}
		class:select-md={size === 'md'}
		class:select-lg={size === 'lg'}
		{id}
		{name}
		{required}
		{disabled}
		bind:value
		onchange={() => onChange && onChange({ value: value })}
	>
		{@render children()}
	</select>
	{#if notice}
		<label class="label" for={id}>
			<span class="label-text-alt">{notice}</span>
		</label>
	{/if}
</div>
