<template>
	<li :class="{ 'text-black': active, 'text-green-600': isCompleted, 'cursor-pointer hover:text-black group': url }" class="flex">
		<button class="flex items-center" @click="navigate(url)" :disabled="!url">
			<!-- Completed step: checkmark -->
			<span
				v-if="isCompleted"
				class="flex items-center justify-center w-6 h-6 me-2 text-xs bg-green-100 text-green-600 rounded-full shrink-0"
			>
				<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
				</svg>
			</span>
			<!-- Current step: filled circle with number -->
			<span
				v-else-if="active"
				class="flex items-center justify-center w-6 h-6 me-2 text-xs font-bold bg-black text-white rounded-full shrink-0"
			>
				{{ number }}
			</span>
			<!-- Future step: outline circle with number -->
			<span
				v-else
				class="flex items-center justify-center w-6 h-6 me-2 text-xs border-2 border-gray-300 text-gray-400 rounded-full shrink-0"
			>
				{{ number }}
			</span>
			<span :class="{ 'font-semibold': active, 'hidden lg:block': !active && !isCompleted }" class="group-hover:underline group-hover:underline-offset-4">
				{{ text }}
			</span>
		</button>
	</li>
</template>

<script setup lang="ts">
const props = defineProps<{
	number: number;
	active?: boolean;
	text: string;
	url?: string;
}>();

// Step is completed if it has a URL (means we can go back to it)
const isCompleted = computed(() => Boolean(props.url));

function navigate(url?: string) {
	if (!url) return;
	navigateTo(url);
}
</script>
