<script lang="ts">
	let { onProcess } = $props<{
		onProcess: (url: string) => void;
	}>();

	let url = $state('');

	function handleSubmit(e: Event) {
		e.preventDefault();
		if (url.trim()) {
			onProcess(url.trim());
		}
	}
</script>

<form onsubmit={handleSubmit} class="max-w-2xl mx-auto">
	<div class="mb-4">
		<label for="url" class="block text-sm font-medium text-gray-700 mb-2">
			Instagram Recipe URL
		</label>
		<input
			type="url"
			id="url"
			bind:value={url}
			placeholder="https://instagram.com/p/..."
			class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
			required
		/>
	</div>
	<button
		type="submit"
		disabled={!url.trim()}
		class="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
	>
		Extract Recipe
	</button>
</form>
