<template lang="pug">
h3 ACTIVELY SEARCHING
p {{question}}
w-select.mt4(
    v-model="selectedRole"
    :items="items"
    placeholder="i am")
w-button.ma1.grow(@click="handleSubmit") NEXT
</template>
<script>
export default {
    name: 'Role',
    props: {
        currentStep:{
            required: true,
            type: Number,
            default: 0
        }
    },
    data: () => ({
        items: [{label: 'RECRUITER'},{label: 'HIRING MANAGER'}],
        question: 'What is your role at your company?',
        selectedRole: null,
    }),
    methods: {
        handleSubmit(){
            if(!this.selectedRole) {
                console.warn('Please select a role.')
                return
            } 
            let payload = {
                key: 'Role',
                question: this.question,
                answer: this.selectedRole
            }
            this.$emit('update-answers', payload)
            this.$emit('go-to-step', this.currentStep + 1)
        }
    }
}
</script>