<template lang="pug">
w-card.skills.w-flex.column
    h3 Recruiter
    p {{ question }}
    DynamicTagList(:placeholder='"skill"' :tags='skills')
    w-button.next-btn(@click='handleSubmit') NEXT
</template>

<script>
import DynamicTagList from '../DynamicTagList.vue'

export default {
    name: 'Skills',
    components: {
        DynamicTagList,
    },
    props: {
        currentStep: {
            required: true,
            type: Number,
            default: 0,
        },
    },
    emits: ['go-to-step', 'update-answers'],
    data: () => ({
        question: 'What are some skills you are looking for at your company?',
        skills: [],
    }),
    methods: {
        handleSubmit() {
            let payload = {
                key: 'Skills',
                question: this.question,
                answer: this.skills,
            }
            this.$emit('update-answers', payload)
            this.$emit('go-to-step', this.currentStep + 1)
        },
    },
}
</script>
