<template>
	<ol
		class="flex items-center justify-between lg:justify-start w-full p-3 space-x-2 text-sm font-medium text-center text-gray-500 bg-white border border-gray-200 rounded-lg shadow-sm sm:text-base sm:p-4 sm:space-x-4 rtl:space-x-reverse"
	>
		<Step :number="1" :active="step === 1" :url="step > 1 && step !== 4 ? getCheckoutBaseUrl(1) : undefined" text="E-Mail-Adresse" />
		<Step :number="2" :active="step === 2" :url="step > 2 && step !== 4 ? getCheckoutBaseUrl(2) : undefined" text="Lieferadresse" />
		<Step :number="3" :active="step === 3" :url="step > 3 && step !== 4 ? getCheckoutBaseUrl(3) : undefined" text="Bezahlung" />
		<Step :number="4" :active="step === 4" text="Bestelldetails" />
	</ol>
</template>

<script setup lang="ts">
const checkoutBaseUrl = "/checkout";

defineProps<{
	step: number;
}>();

function getCheckoutBaseUrl(step: number) {
	return `${checkoutBaseUrl}/${step}`;
}
</script>
