<script lang="ts">
	// Props
	let { currentStep, totalSteps, stepTitle } = $props<{
		currentStep: number;
		totalSteps: number;
	}>();
</script>

<div class="mb-8 mt-6">
    <div class="flex items-center justify-center gap-4 w-full">
		{#each Array(totalSteps) as _, index}
			<div class="flex items-center gap-2">
				<div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium {
					index === currentStep ? 'bg-blue-600 text-white' :
					index < currentStep ? 'bg-green-600 text-white' :
					'bg-gray-200 text-gray-600'
				}">
					{index + 1}
				</div>
				{#if index < totalSteps - 1}
					<div class="w-10 h-1 rounded {
						index < currentStep ? 'bg-green-600' : 'bg-gray-200'
					}"></div>
				{/if}
			</div>
		{/each}
	</div>
</div>
