<template lang="pug">
  .wrap.flex
    .step.flex(v-for="step in steps", :key="step.id" )
      .line.flex.mx-2(v-if="step.id > 0", :class="{'filled': filled(step.id)}")
      .step-num.flex.mx-2(:class="{'filled': filled(step.id)}")
        .step-icon {{step.label}}
      span.mx-2 {{step.value}}
</template>

<script>
export default {
  name: "BaseStepper",
  data() {
    return {};
  },
  props: {
    steps: Array,
    currentStep: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    filled(id) {
      return id <= this.currentStep;
    },
  },
};
</script>

<style lang="sass" scoped>
.step
  align-items: center
.step-num
  background-color: var(--btn-grey-color)
  gap: 8px
  padding: 0
  border-radius: 50%
  height: 32px
  width: 32px
  justify-content: center
  align-items: center
  &.filled
    background-color: var(--btn-blue-color)
    .step-icon
      color: var(--default-white)

.line
  width: 78px
  border: 1.5px solid var(--btn-grey-color)
  &.filled
    background-color: var(--btn-blue-color)
    border-color: var(--btn-blue-color)
</style>
