<script lang="ts">
	// Props
	let { currentStep, totalSteps, canProceed, loading, prevStep, nextStep, createEvent } = $props<{
		currentStep: number;
		totalSteps: number;
		canProceed: boolean;
		loading: boolean;
		prevStep: () => void;
		nextStep: () => void;
		createEvent: () => Promise<void>;
	}>();
</script>

<div class="flex items-center justify-between">
	<button
		onclick={prevStep}
		disabled={currentStep === 0}
		class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded transition disabled:opacity-50 disabled:cursor-not-allowed"
	>
		Previous
	</button>

	<div class="flex gap-2">
		{#if currentStep < totalSteps - 1}
			<button
				onclick={nextStep}
				disabled={!canProceed}
				class="px-6 py-2 bg-blue-600 text-white font-semibold rounded hover:bg-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
			>
				Next
			</button>
		{:else}
			<button
				onclick={createEvent}
				disabled={!canProceed || loading}
				class="px-6 py-2 bg-green-600 text-white font-semibold rounded hover:bg-green-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
			>
				{loading ? 'Creating...' : 'Create Event'}
			</button>
		{/if}
	</div>
</div>
