<script lang="ts">
    import { character } from '$lib/data/character'

    interface Props {
        id: string
        value: number
        label?: string
        region?: keyof typeof character
        required?: boolean
    }

    let { id, value = $bindable(), label, region = 'global', required = false }: Props = $props()
</script>

{#if label}
    <label for={id}>{label}</label>
{/if}
<select id={id} bind:value={value} required={required}>
    {#if !required}
        <option value=0></option>
    {/if}
    {#each character[region] as c}
        <option value={c.chara_id}>{c.name}</option>
    {/each}
</select>
