<script lang="ts">
	import type { ListItem } from '$lib/Utils';
	import Svelecte from 'svelecte';

	type Item = number | string | ListItem;
	type Value = Item | Item[] | undefined | null;

	interface Props {
		id: string;
		object?: boolean;
		multi?: boolean;
		clearable?: boolean;
		placeholder?: string;
		options: ListItem[] | undefined;
		value: Value;
	}

	let {
		id: inputId,
		object: valueAsObject = false,
		multi: multiple = false,
		clearable = false,
		placeholder = 'Select...',
		options,
		value = $bindable()
	}: Props = $props();
</script>

{#if options !== null && options !== undefined}
	<Svelecte
		virtualList
		valueField="id"
		labelField="name"
		{options}
		{multiple}
		{clearable}
		{inputId}
		{valueAsObject}
		{placeholder}
		bind:value
	/>
{:else}
	<Svelecte {placeholder} />
{/if}