<template>
    <div>
        <div class="steps-content">
            <h3>Step <span v-if="step > 0" class="step-number">{{step}}</span></h3>
            <p class="step-number-content active">Enter your personal information to get closer to
                companies.</p>
            <p class="step-number-content d-none">Get to know better by adding your diploma,certificate and
                education life.</p>
            <p class="step-number-content d-none">Help companies get to know you better by telling then about
                your past experiences.</p>
            <p class="step-number-content d-none">Add your profile piccture and let companies find youy
                fast.</p>
        </div>
        <ul class="progress-bar">
            <li :class="{'active':!step || step >= 1}">Create Account</li>
            <li :class="{'active':step >= 2}">Add Profile</li>
            <li :class="{'active':step >= 3}">Credit Report</li>
        </ul>
    </div>
</template>
<script>
export default {
    name: 'Step',
    props: {
        step: String
    }
}
</script>
