<template>
  <div class="form-stepper">
    <template
      v-for="(label, index) in items"
      :key="index"
    >
      <div
        class=" form-stepper__step"

        :class="{
          'form-stepper__step--current': index === step,
          'form-stepper__step--passed': index < step,
        }"
      >
        <div class="form-stepper__index">
          <span v-if="index > step - 1 ">
            {{ index + 1 }}
          </span>

          <UiIconCheck
            v-else
            class="form-stepper__icon"
          />
        </div>

        <div
          class="form-stepper__label"
          v-html="label"
        />
      </div>

      <div
        v-if="index !== items.length - 1"
        class="form-stepper__line"
        :class="{
          'form-stepper__line--passed': index > step - 1,
        }"
      />
    </template>
  </div>
</template>

<script setup>
const props = defineProps({
  items: {
    type: Array,
    required: true,
  },
  step: {
    type: Number,
    default: 0,
  },
})

const emit = defineEmits(['set'])
</script>

<style lang="scss">
.form-stepper {
  $self: &;

  width: 100%;
  display: flex;
  align-items: center;

  &__line {
    $line: &;

    height: 3px;
    flex: 1;
    background-image: linear-gradient(90deg, #a5e9bc 0%, #a7b9d5 100%);
    margin-inline: 4px;
    border-radius: 2px;

    &--passed {
      background-image: linear-gradient(90deg, #a7b9d5 0%, #dfe5ff 100%);
    }
  }

  &__step {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    user-select: none;

    &:first-child {
      justify-self: flex-start;
    }

    &:last-child {
      justify-self: flex-end;
    }

    &--passed {
      --form-stepper-index-background: #{$clr-green-500};
      --form-stepper-label-color: #{$clr-green-500};

      //color: var(--form-stepper-index-color, #{$clr-white});

      cursor: initial;
    }

    &--current {
      --form-stepper-index-background: #{$clr-grey-300};
      --form-stepper-label-color: #{$clr-grey-600};
      --form-stepper-index-color: #{$clr-grey-600};
      cursor: initial;
    }
  }

  &__icon {
    --icon-size: 20px;
    line-height: 18px;
    color: $clr-white;
  }

  &__index {
    @include txt-i-m;

    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 8px;
    text-align: center;
    background: var(--form-stepper-index-background, #{$clr-grey-200});
    color: var(--form-stepper-index-color, #{$clr-grey-400});
    cursor: pointer;
  }

  &__label {
    @include txt-r;

    color: var(--form-stepper-label-color, #{$clr-grey-600});
    margin-top: 16px;
    text-align: center;
  }
}
</style>
