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

	interface Props {
		id: string;
		characters: Character[] | null;
		value: Character | undefined;
		class?: ClassValue | null;
		option?: Snippet<[Character]>;
		required?: boolean;
	}

	let { id, characters, value = $bindable(), class: className, option, required = false }: Props = $props();

	const charas = $derived(characters ?? []);

	const key = (v: Character) => ({ id: v.chara_id, name: v.name });
</script>

<Pick {id} items={charas} {key} bind:value {option} class={className} {required} />
