<script lang="ts">
	let {
		canProceed = true,
		currentStep,
		textBack = 'Back',
		textForwardDisabled = 'Next',
		textForwardEnabled = 'Next',
		onBack,
		onForward,
		nextDisabled = false
	} = $props<{
		canProceed?: boolean;
		currentStep?: any;
		textBack?: string;
		textForwardDisabled?: string;
		textForwardEnabled?: string;
		onBack?: () => void;
		onForward?: () => void;
		nextDisabled?: boolean;
	}>();

	async function handleBack() {
		if (onBack) {
			await onBack();
		} else if (currentStep) {
			currentStep.set($currentStep - 1);
		}
	}

	async function handleForward() {
		if (onForward) {
			await onForward();
		}
		if (currentStep) {
			currentStep.set($currentStep + 1);
		}
	}
</script>

<div class="flex flex-col gap-3 sm:flex-row sm:justify-between">
	{#if onBack || currentStep}
		<button
			onclick={handleBack}
			class="flex w-full items-center justify-center gap-2 rounded-lg bg-gray-200 px-4 py-2 font-medium text-gray-700 hover:bg-gray-300 sm:w-auto"
		>
			<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
			</svg>
			<span>{textBack}</span>
		</button>
	{/if}

	<button
		onclick={handleForward}
		disabled={!canProceed || nextDisabled}
		class="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-gray-400 sm:w-auto"
	>
		<span>{canProceed && !nextDisabled ? textForwardEnabled : textForwardDisabled}</span>
		<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
		</svg>
	</button>
</div>
