<template>
    <buttonQuestion
        v-model="selectedValue"
        class="radioQuestion"
        :questionText="questionText"
        :answers="answers"
        groupName="isVehicleProtected"
        textPosition="text-center"
        validationRules="option-required"
        isRequired />
</template>

<script>
import buttonQuestion from '@/digital-components/button-question/button-question.vue';

// Supporting files
import { defineRule } from 'vee-validate';
import { required } from '@/helpers/validation-rules';
import errorMessages from '@/constants/error-messages';

defineRule('option-required', required(errorMessages.OPTION_REQUIRED));

export default {
    name: 'vehicle-protected-question',
    components: {
        buttonQuestion
    },
    props: {
        // eslint-disable-next-line vue/require-prop-types
        modelValue: {
            isVehicleProtected: Boolean
        },
        cmsWidgetName: String
    },
    emits: ['update:modelValue'],
    computed: {
        questionText() {
            return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
        },
        selectedValue: {
            get() {
                return this.modelValue;
            },
            set(newValue) {
                this.$emit('update:modelValue', newValue);
            }
        },
        answers() {
            return this.getCmsContent(this.cmsWidgetName, 'Answers');
        }
    }
};
</script>

<style lang="scss">
.modal-dialog {
    .question-text {
        & > span {
            text-align: left;
        }
    }
}
</style>
