<script setup>
const props = defineProps({
    currentStep: {
        type: Number,
        default: 1
    }
});

const steps = [
    { number: 1, title: 'Carrito', route: null }, // Link would go back to cart
    { number: 2, title: 'Información', route: null },
    { number: 3, title: 'Envío', route: null },
    { number: 4, title: 'Pago', route: null },
];
</script>

<template>
    <nav class="flex items-center text-xs md:text-sm font-medium mb-6">
        <template v-for="(step, index) in steps" :key="step.number">
            <!-- Step Item -->
            <div :class="[
                'whitespace-nowrap transition-colors',
                currentStep === step.number 
                    ? 'text-gray-900 dark:text-white font-bold' 
                    : currentStep > step.number
                        ? 'text-blue-600 dark:text-blue-400' 
                        : 'text-gray-400 dark:text-gray-500'
            ]">
                {{ step.title }}
            </div>

            <!-- Separator -->
            <div v-if="index < steps.length - 1" class="mx-2 text-gray-400 dark:text-gray-600">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </div>
        </template>
    </nav>
</template>
