<template>
  <div class="step-bar">
    <div
      v-for="i in total"
      :key="i"
      class="step-dot"
      :class="{ active: i - 1 === current, done: i - 1 < current }"
    />
  </div>
</template>

<script setup>
defineProps({ current: Number, total: { type: Number, default: 6 } })
</script>

<style lang="scss" scoped>
.step-bar {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 12px 0;
}
.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  transition: all 0.4s ease;

  &.active {
    width: 24px;
    background: var(--primary);
  }
  &.done {
    background: var(--success);
  }
}
</style>
