<script>
	/**
	 * @typedef {Object} Props
	 * @property {any} value
	 * @property {any} query
	 * @property {boolean} [is_required]
	 * @property {any} [on_change]
	 * @property {import('svelte').Snippet<[any]>} [children]
	 */

	/** @type {Props} */
	let {
		value = $bindable(),
		query,
		is_required = true,
		on_change = () => {},
		children
	} = $props();
</script>

{#if is_required}
	<select
		required
		bind:value
		onchange={on_change}
		class="w-full h-min p-2
		border-2 border-black dark:border-none
		bg-white dark:bg-black
		text-black dark:text-white
		appearance-none">
		{#await query then vtypes}
			{#each vtypes as vtype}
				{#if vtype.id === value}
					<option selected value={vtype.id}>
						{@render children?.({ vtype, })}
					</option>
				{:else}
					<option value={vtype.id}>
						{@render children?.({ vtype, })}
					</option>
				{/if}
			{/each}
		{/await}
	</select>
{:else}
	<select
		bind:value
		class="w-full p-2 mx-2
		border-2 border-black dark:border-none
		bg-white dark:bg-black
		text-black dark:text-white
		appearance-none">
		{#await query then vtypes}
			{#each vtypes as vtype}
				{#if vtype.id === value}
					<option selected value={vtype.id}>
						{@render children?.({ vtype, })}
					</option>
				{:else}
					<option value={vtype.id}>
						{@render children?.({ vtype, })}
					</option>
				{/if}
			{/each}
		{/await}
	</select>
{/if}
