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

	const totalSteps = steps.length;
</script>

<div
	class="mb-8 grid grid-cols-2 gap-4 md:grid-cols-3 md:gap-6 lg:flex lg:items-center lg:justify-center lg:space-x-4 {className}"
>
	{#each steps as step, index (step)}
		{@const displayNumber = startAt + index}
		{@const isActive = displayNumber <= 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'}"
			>
				{displayNumber}
			</div>

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

			{#if !isLastStep}
				<div
					class="mx-4 hidden h-0.5 w-8 md:hidden lg:block {displayNumber < currentStep
						? 'bg-primary'
						: 'bg-gray-200'}"
				></div>
			{/if}
		</div>
	{/each}
</div>
