<script lang="ts">
	import { type Character } from '$lib/data/character';
	import type { ClassValue } from 'svelte/elements';

	interface Props {
		id: string;
		characters: Character[] | null;
		value: number;
		class?: ClassValue | null;
		optionClass?: ClassValue | null;
		required?: boolean;
	}

	let { id, characters, value = $bindable(), class: className, optionClass, required = false }: Props = $props();
</script>

<select {id} class={className} bind:value {required}>
	{#if !required}
		<option value="0" class={optionClass}></option>
	{/if}
	{#each characters ?? [] as c (c.chara_id)}
		<option value={c.chara_id} class={optionClass}>{c.name}</option>
	{/each}
</select>
