<script setup>
defineProps({
  currentStep: {
    type: Number,
    required: true
  }
});

const steps = [
  { number: 1, name: 'department.title' },
  { number: 2, name: 'mainRole.title' },
  { number: 3, name: 'skill.title' }
];
</script>

<template>
  <div class="w-full pb-4">
    <div class="flex items-center justify-center space-x-4 mb-6">
      <template v-for="(step, index) in steps" :key="step.number">
        <div class="flex items-center">
          <div
            class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium transition-colors"
            :class="currentStep >= step.number ? 'bg-primary text-primary-on' : 'bg-gray-300 text-gray-600'"
          >
            {{ step.number }}
          </div>
          <span class="ml-2 text-sm font-medium">{{ $t(step.name) }}</span>
        </div>

        <div
          v-if="index < steps.length - 1"
          class="w-8 h-1 bg-gray-300 transition-colors"
          :class="currentStep > step.number ? 'bg-primary' : ''"
        />
      </template>
    </div>
  </div>
</template>
