<template>
  <b-row class="steps">
    <ul >
      <li v-for="(step, index) in steps" :key="step.title">
        
       <b-button :variant="getVariant(index)" @click="$emit('click',index+1)">{{index+1}}</b-button>
        
        <span class="d-none d-sm-none d-md-block" :class="'text-'+getVariant(index)">

{{step.description}}
        
        </span>

<div class="d-sm-block d-md-none" :class="'text-'+getVariant(index)">

{{step.shortDescription}}
        
        </div>

      </li>
      
    </ul>
  </b-row>
</template>

<script>
export default {
    props:{
        active:{
            type: Number,
            default(){
                return 1;
            }
        }
    },
    data(){
        return {
            steps: [
                {
                    description: "Dados Cadastrais",
                    shortDescription: "Dados"
                },
                {
                    description: "Endereço",
                    shortDescription: "Endereço"
                },
                {
                    description: "Selfie",
                    shortDescription: "Selfie"
                },
                {
                    description: "Documento",
                    shortDescription: "Docs"
                }
            ]
        }
    },
    methods:{
        getVariant(index){

            if(index+1 === this.active ){
                return "danger";
            }

            return "primary";
        }
    }
}
</script>

<style lang="scss" scoped>

.steps{
    margin-bottom: 3em;
    ul{
        margin: 0px;
        padding: 0px;
        width: 100%;
        
        li{
            list-style: none;
            display: inline-block;
            width: 25%;
            text-align: center;
        }
    }
}

</style>