<script lang="ts">
	// eslint-disable-next-line no-undef
	import { createEventDispatcher } from 'svelte';

	type T = $$Generic;

	export let id: string | null = null;
	export let name: string | null = null;
	export let value: T | null = null;
	export let label: string | null = null;
	export let notice: string | null = null;
	export let required = false;
	export let disabled = false;
	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
	export let pickyWidth = true;

	let dispatch = createEventDispatcher();
</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
		on:change={(e) => dispatch('change', { value: value })}
	>
		<slot />
	</select>
	{#if notice}
		<label class="label" for={id}>
			<span class="label-text-alt">{notice}</span>
		</label>
	{/if}
</div>
