<template>
    <div class="progress-bar mb30">
        <div class="progress-line"></div>
        <div class="flex justify-between align-center no-gutters circle">
            <div class="status-info" v-for="(step, index) in steps" :key="index">
                <div class="status-type" :class="{ active: index === pageNumber - 1 }"></div>
                <div class="info-text" :class="{ active: index === pageNumber - 1 }">
                    <p>step {{ index + 1 }}</p>
                    <p>{{ step }}</p>
                </div>
            </div>
        </div>
    </div>

</template>

<script>


export default {
    props: {
        steps: {
            type: Array,
            default: []
        },
        pageNumber: {
            type: Number,
            default: 1,
        },
    },
    data() {
        return {

        }
    },
    methods: {


    },
    watch: {
        "pageNumber": function (newV, oldV) {
        }
    },
    computed: {

    },
    components: {

    },
    mounted() {

    },

}
</script>

