<script lang="ts">
	let { eventData = $bindable() } = $props<{
		eventData: {
			name: string;
			date: string;
		};
	}>();
</script>

<div class="space-y-6">
	<div>
		<h3 class="text-lg font-medium text-gray-900 mb-4">Event details</h3>

		<label for="eventName" class="block text-sm font-medium text-gray-700 mb-2">
			Event Name *
		</label>
		<input
			id="eventName"
			type="text"
			bind:value={eventData.name}
			class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
			placeholder="Enter event name"
		/>
	</div>

	<div>
		<label for="eventDate" class="block text-sm font-medium text-gray-700 mb-2">
			Event Date *
		</label>
		<input
			id="eventDate"
			type="date"
			bind:value={eventData.date}
			class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
		/>
	</div>
</div>
