<template>
  <div class="uif-step-progress clearfix">
    <template v-for="(name, idx) in data">
      <div class="uif-step-progress-item" :key="idx" :style="styles" :class="{active: idx <= value}">
        <div class="uif-step-progress-line"></div>
        <div class="uif-step-progress-index">{{idx + 1}}</div>
        <div class="uif-step-progress-title">{{name}}</div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'u-step-progress',
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    },
    value: {
      type: Number,
      default: 0
    }
  },
  computed: {
    styles () {
      return {
        width: (1 / this.data.length) * 100 + '%'
      }
    }
  }
}
</script>
