<script lang="ts">
import { m } from '$lib/paraglide/messages.js';

interface Props {
	value: string;
	disabled?: boolean;
}

let { value = $bindable(), disabled = false }: Props = $props();
</script>

<div>
	<label for="script-type-select" class="text-sm font-bold tracking-widest text-gray-400 uppercase">
		{m.ocr_trigger_label()}
	</label>
	<select
		id="script-type-select"
		bind:value={value}
		disabled={disabled}
		class="border-brand-sand min-h-[44px] w-full rounded-sm border bg-white px-3 py-2 font-serif text-sm text-brand-navy focus:ring-2 focus:ring-brand-mint focus:outline-none"
	>
		<option value="" disabled>{m.ocr_trigger_select_placeholder()}</option>
		<option value="TYPEWRITER">{m.ocr_script_type_typewriter()}</option>
		<option value="HANDWRITING_LATIN">{m.ocr_script_type_handwriting_latin()}</option>
		<option value="HANDWRITING_KURRENT">{m.ocr_script_type_handwriting_kurrent()}</option>
	</select>
</div>
