<template>
  <view class="progress-container">
    <view class="progress-track">
      <view class="progress-steps">
        <view
          v-for="(step, index) in steps"
          :key="index"
          class="step-dot"
          :class="{
            completed: index < currentStep,
            active: index === currentStep
          }"
        >
          <text v-if="index < currentStep" class="uni-icons uniui-checkmarkempty text-white text-xs"></text>
          <text v-else class="text-xs">{{ index + 1 }}</text>
        </view>
      </view>
    </view>
    <view class="flex justify-between mt-2">
      <text
        v-for="(step, index) in steps"
        :key="index"
        class="step-name"
        :class="{
          'text-primary': index <= currentStep,
          'text-gray-400': index > currentStep
        }"
      >
        {{ step }}
      </text>
    </view>
  </view>
</template>

<script setup lang="ts">
interface Props {
  steps: string[]
  currentStep: number
}

defineProps<Props>()
</script>

<style scoped>
.progress-container {
  padding: 0 8px;
}

.progress-track {
  position: relative;
  padding: 0 10px;
}

.progress-track::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 24px;
  right: 24px;
  height: 3px;
  background: #e5e7eb;
  border-radius: 2px;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.step-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #9ca3af;
  transition: all 0.3s;
}

.step-dot.completed {
  background: #3b82f6;
  color: white;
}

.step-dot.active {
  background: #059669;
  color: white;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.step-name {
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
}

.text-primary {
  color: #059669;
  font-weight: 500;
}

.text-gray-400 {
  color: #9ca3af;
}
</style>
