<template>
  <stepped class="w-100 my-3" :steps="steps" :active-step="activeIndex" :callback="stepsCallback" ative="0" center>
    <template slot="indicatorValue" slot-scope="scope" class="order-step-icon">
      <icon :name="scope.text.icon" class="icon-size-4" :class="{ 'animated bounceIn': scope.active }" />
    </template>
    <template slot="textArea" slot-scope="scope">
      <div class="pt-2 text-medium font-weight-bold-extra">
        <router-link v-if="activeIndex > scope.index" :to="scope.text.path">
          {{ scope.text.title }}
        </router-link>
        <span
          v-else
          @click="
            () => {
              if (scope.callback) scope.callback(scope.text)
            }
          "
          :class="{
            'text-primary': scope.text.state === true,
            clickable: typeof scope.callback !== 'undefined' && scope.text.state === true,
          }"
        >
          {{ scope.text.title }}
        </span>
      </div>
    </template>
  </stepped>
</template>
<script>
import Stepped from './Stepped'

export default {
  name: 'SteppedIcon',
  components: {
    Stepped,
  },
  props: {
    steps: { type: Array, default: () => [] },
    activeIndex: { type: Number, default: 0 },
    stepsCallback: { type: Function, default: () => () => {} },
  },
}
</script>
