<script setup>
import { motion } from 'motion-v'
import { Check } from 'lucide-vue-next'

defineProps({
  currentStep: {
    type: Number,
    default: 0,
  },
  steps: {
    type: Array,
    default: () => [],
  },
})
</script>

<template>
  <div class="mb-8 md:mb-12">
    <div class="flex items-center justify-between relative">
      <div class="absolute left-0 top-1/2 -translate-y-1/2 w-full h-1.5 bg-white/60 backdrop-blur-sm rounded-full overflow-hidden border border-white/40 shadow-inner">
        <motion.div
          class="h-full bg-gradient-to-r from-brand-orange to-amber-500"
          :initial="{ width: '0%' }"
          :animate="{ width: steps.length > 1 ? `${(currentStep / (steps.length - 1)) * 100}%` : '0%' }"
          :transition="{ duration: 0.5, ease: 'easeInOut' }"
        />
      </div>

      <div
        v-for="(step, index) in steps"
        :key="step.id"
        class="relative z-10 flex flex-col items-center gap-3"
      >
        <motion.div
          :initial="false"
          :animate="{
            backgroundColor: index <= currentStep ? '#f97316' : 'rgba(255,255,255,0.8)',
            color: index <= currentStep ? '#ffffff' : '#94a3b8',
            scale: index === currentStep ? 1.1 : 1,
            boxShadow: index === currentStep ? '0 10px 25px -5px rgba(249,115,22,0.4)' : '0 4px 15px rgba(0,0,0,0.05)',
            borderColor: index <= currentStep ? 'transparent' : 'rgba(255,255,255,0.5)',
          }"
          class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm transition-colors duration-300 backdrop-blur-md border"
        >
          <Check v-if="index < currentStep" class="w-5 h-5" />
          <span v-else>{{ index + 1 }}</span>
        </motion.div>

        <span
          :class="[
            'text-xs font-bold uppercase tracking-widest transition-colors duration-300',
            index === currentStep ? 'text-brand-orange' : 'text-slate-400',
          ]"
        >
          {{ step.label }}
        </span>
      </div>
    </div>
  </div>
</template>
