Crussell/frontend/src/lib/components/booking/BookingActions.svelte

<script lang="ts">
	import { createEventDispatcher } from 'svelte';
	import { Button } from '$lib/components/ui/button';

	export let canBack = false;
	export let canNext = false;
	export let isSubmitting = false;
	export let nextLabel = 'Next';
	export let submitLabel = 'Submit';
	export let showSubmit = false;

	const dispatch = createEventDispatcher();
</script>

<div class="flex justify-between">
	{#if canBack}
		<Button variant="outline" onclick={() => dispatch('back')}>Back</Button>
	{:else}
		<div></div>
	{/if}

	{#if showSubmit}
		<Button
			disabled={!canNext || isSubmitting}
			onclick={() => dispatch('submit')}
			class="bg-primary text-primary-foreground"
		>
			{isSubmitting ? 'Processing...' : submitLabel}
		</Button>
	{:else}
		<Button disabled={!canNext} onclick={() => dispatch('next')}>
			{nextLabel}
		</Button>
	{/if}
</div>