<template>
  <view class="step-indicator">
    <view v-for="(step, idx) in steps" :key="step.label" class="step-item">
      <view v-if="idx > 0" class="step-line" :class="{ 'step-line-done': idx < current }" />
      <view class="step-dot"
        :class="{ 'step-current': idx === current, 'step-done': idx < current }"
        @tap="idx < current && onChange && onChange(idx)">
        <text v-if="idx < current" class="step-check">&#x2713;</text>
        <text v-else class="step-num">{{ idx + 1 }}</text>
      </view>
      <text class="step-label" :class="{ 'step-current': idx === current, 'step-done': idx < current }">
        {{ step.label }}
      </text>
    </view>
  </view>
</template>

<script setup lang="ts">
defineProps<{
  steps: { label: string }[]
  current: number
  onChange?: (index: number) => void
}>()
</script>

<style lang="scss" scoped>
.step-indicator {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px 0;
}

.step-item {
  @include flex-center;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.step-line {
  position: absolute;
  top: 18px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: $bd-l;
}

.step-line-done {
  background: $pri;
}

.step-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid $bd-l;
  @include flex-center;
  margin-bottom: 8px;
  background: $white;
}

.step-current {
  border-color: $pri;

  &.step-dot { background: $pri; }
  &.step-label { color: $pri; font-weight: 600; }
}

.step-done {
  border-color: $pri;
  background: $pri;

  &.step-label { color: $acc; }
}

.step-check {
  color: $white;
  font-size: 18px;
}

.step-num {
  font-size: var(--tk-font-body-sm);
  color: $tx3;
}

.step-label {
  font-size: var(--tk-font-micro);
  color: $tx3;
  text-align: center;
  max-width: 80px;
  white-space: nowrap;
}
</style>
