<script lang="ts">
	let {
		onScan,
		disabled = false
	}: {
		onScan: (raw: string) => void;
		disabled?: boolean;
	} = $props();

	let value = $state('');
	let inputEl: HTMLInputElement | undefined = $state();

	function submit() {
		const v = value.trim();
		if (!v) return;
		onScan(v);
		value = '';
		inputEl?.focus();
	}

	export function focus() {
		inputEl?.focus();
	}
</script>

<section class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
	<h2 class="mb-3 text-lg font-semibold text-slate-800">Scan part</h2>
	<div class="flex gap-2">
		<input
			bind:this={inputEl}
			bind:value
			onkeydown={(e) => e.key === 'Enter' && submit()}
			{disabled}
			placeholder="Scan barcode or type part code…"
			class="flex-1 rounded-md border border-slate-300 bg-white px-4 py-3 text-lg shadow-sm focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 focus:outline-none disabled:opacity-50"
		/>
		<button
			type="button"
			onclick={submit}
			{disabled}
			class="rounded-md bg-brand-500 px-5 py-3 font-medium text-white shadow-sm hover:bg-brand-600 disabled:opacity-50"
		>
			Process
		</button>
	</div>
</section>
