<template>
  <div class="stepContainer flex items-center justify-between">
    <template v-for="(step, i) in list">
      <div
        v-if="step.value !== modelValue"
        style="width: 16px; height: 16px"
        class="relative"
      >
        <div
          class="dot1 rounded-full relative absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2"
        >
          <div
            class="absolute left-1/2 -translate-x-1/2 top-3 text1 cursor-pointer"
            @click="$emit('update:modelValue', step.value)"
          >
            {{ step.name }}
          </div>
        </div>
      </div>
      <div class="relative" v-if="step.value === modelValue">
        <div class="dot2 rounded-full"></div>
        <div
          class="dot1 rounded-full z-10 absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2"
          style="background-color: white"
        >
          <div
            class="absolute left-1/2 -translate-x-1/2 top-3 text-active cursor-pointer"
            @click="$emit('update:modelValue', step.value)"
          >
            {{ step.name }}
          </div>
        </div>
      </div>
      <div class="line flex-grow" v-if="i !== list.length - 1"></div>
    </template>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  list: any[];
  modelValue: any;
}>();

defineEmits(["update:modelValue"]);
</script>

<style lang="scss" scoped>
.stepContainer {
  .dot1 {
    width: 9px;
    height: 9px;
    background: #92c3f8;
  }
  .dot2 {
    width: 16px;
    height: 16px;
    background: #eaf3ff;
    opacity: 0.26;
  }
  .line {
    height: 1px;
    border: 1px solid #92c3f8;
    margin: 0 10px;
  }
  .text1 {
    font-size: 14px;
    font-weight: 500;
    color: #92c3f8;
    white-space: nowrap;
  }
  .text-active {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    color: #ffffff;
  }
}
</style>
