<script lang="ts">
	export let currentStep: number;
	export let steps: string[] = ['Service', 'Date & Time', 'Details', 'Payment'];

	const totalSteps = steps.length;
</script>

<div class="mb-8 grid grid-cols-2 gap-4 md:flex md:items-center md:justify-center md:space-x-4">
	{#each steps as step, index (step)}
		{@const stepNumber = index + 1}
		{@const isActive = stepNumber <= currentStep}
		{@const isLastStep = index === totalSteps - 1}

		<div class="flex items-center justify-start md:justify-center">
			<!-- Step circle -->
			<div
				class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium {isActive
					? 'bg-primary text-primary-foreground'
					: 'bg-gray-200 text-gray-600'}"
			>
				{stepNumber}
			</div>

			<!-- Step label -->
			<span class="ml-2 text-sm font-medium {isActive ? 'text-primary' : 'text-gray-600'}">
				{step}
			</span>

			<!-- Connector line (desktop only, not after last step) -->
			{#if !isLastStep}
				<div
					class="mx-4 hidden h-0.5 w-8 md:block {stepNumber < currentStep
						? 'bg-primary'
						: 'bg-gray-200'}"
				></div>
			{/if}
		</div>
	{/each}
</div>
