<script lang="ts">
	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';

	interface Props {
		isLoading: boolean;
		backLabel: string;
		onStart: () => void;
		onBack: () => void;
	}

	let { isLoading, backLabel, onStart, onBack }: Props = $props();
</script>

<div class="space-y-3">
	<button
		type="button"
		onclick={onStart}
		disabled={isLoading}
		class="btn-primary w-full disabled:opacity-50"
	>
		{#if isLoading}
			<span class="flex items-center justify-center gap-2">
				<IconSpinner class="h-4 w-4" />
				Starting Session...
			</span>
		{:else}
			Start Work Session
		{/if}
	</button>
	<button type="button" onclick={onBack} class="btn-ghost w-full text-center">
		{backLabel}
	</button>
</div>
