<template>
    <buttonQuestion
        ref="policyVehiclesQuestion"
        v-model="selectedVehicleVin"
        groupName="policyVehiclesQuestionOption"
        buttonTypeString="listButton"
        isOverflowScrollable
        :answers="answers"
        isRequired
        :validationRules="validationRules" />
</template>
<script>
import buttonQuestion from '@/digital-components/button-question/button-question.vue';

export default ({
    name: 'policy-vehicles-question',
    components: {
        buttonQuestion
    },
    props: {
        vehicles: Array,
        validationRules: String,
        modelValue: String
    },
    emits: ['update:modelValue'],
    computed: {
        answers() {
            const policyVehiclesAnswerFromCMS = this.getCmsContent('PolicyVehiclesQuestion', 'Answers');
            const combinedVehicles = [...this.vehicles, ...policyVehiclesAnswerFromCMS];
            return combinedVehicles;
        },
        selectedVehicleVin: {
            get() {
                return this.modelValue;
            },
            set(newValue) {
                this.$emit('update:modelValue', newValue);
            }
        }
    }
});
</script>
<style lang="scss" scoped>
.question-text {
  margin-top: 1rem;
    & > span {
        font-size: 1.25rem;
        font-weight: 400 !important;
        line-height: 2rem;
    }
}
</style>
