<script lang="ts">
	import type { SessionType } from './types';
	import { getSessionColorClasses } from './types';

	interface Props {
		sessionType: SessionType;
		isLoading?: boolean;
		disabled?: boolean;
		onStart: () => void;
		onBack?: () => void;
	}

	const { sessionType, isLoading = false, disabled = false, onStart, onBack }: Props = $props();

	const colors = $derived(getSessionColorClasses(sessionType));
</script>

<div class="flex flex-col gap-4 sm:flex-row sm:items-center">
	<button
		type="button"
		class="inline-flex items-center justify-center gap-2 rounded-lg px-6 py-3 text-base font-semibold text-white shadow-lg transition-all hover:shadow-xl focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 {colors.bg} {colors.ring}"
		onclick={onStart}
		disabled={isLoading || disabled}
	>
		{#if isLoading}
			<svg class="h-5 w-5 animate-spin" fill="none" viewBox="0 0 24 24">
				<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
				></circle>
				<path
					class="opacity-75"
					fill="currentColor"
					d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
				></path>
			</svg>
			<span>Starting...</span>
		{:else}
			<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
				></path>
				<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
				></path>
			</svg>
			<span>Start Session</span>
		{/if}
	</button>

	{#if onBack}
		<button
			type="button"
			class="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
			onclick={onBack}
		>
			Back
		</button>
	{/if}
</div>
