<script lang="ts">
	let {
		value = $bindable(''),
		placeholder = 'Search...',
		onsubmit,
		loading = false
	}: {
		value?: string;
		placeholder?: string;
		onsubmit: () => void;
		loading?: boolean;
	} = $props();

	function handleKeydown(event: KeyboardEvent) {
		if (event.key === 'Enter') {
			onsubmit();
		}
	}
</script>

<div class="flex gap-2">
	<input
		type="text"
		bind:value
		{placeholder}
		onkeydown={handleKeydown}
		disabled={loading}
		class="flex-1 rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm text-gray-900 placeholder-gray-400 shadow-sm outline-none transition-all focus:border-blue-400 focus:ring-2 focus:ring-blue-100 disabled:cursor-not-allowed disabled:opacity-60"
	/>
	<button
		onclick={onsubmit}
		disabled={loading || !value.trim()}
		class="rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
	>
		{#if loading}
			<span class="inline-flex items-center gap-1.5">
				<svg
					class="h-4 w-4 animate-spin"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					stroke-width="2"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
					/>
				</svg>
				Searching
			</span>
		{:else}
			Search
		{/if}
	</button>
</div>
