<script lang="ts" generics="Value extends string">
	import { tv } from 'tailwind-variants';

	const select = tv({
		base: 'cursor-pointer border-2 border-border focus:si-border-border focus:si-border-2 bg-surface px-2 py-1 text-xs font-bold text-text transition-opacity focus:outline-3'
	});

	type Option = {
		value: Value;
		label: string;
	};

	let {
		value = $bindable(),
		options = [] as Option[],
		label,
		id: propId,
		class: className = ''
	}: {
		value: Value;
		options: Option[];
		label?: string;
		id?: string;
		class?: string;
	} = $props();

	const svelteId = $props.id();
	const id = $derived(propId ?? svelteId);
</script>

<div class="flex items-center gap-2 {className}">
	{#if label}
		<label for={id} class="text-xs font-bold tracking-wider text-text-muted uppercase">
			{label}
		</label>
	{/if}
	<select {id} bind:value class={select()}>
		{#each options as option (option.value)}
			<option value={option.value}>{option.label}</option>
		{/each}
	</select>
</div>
