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

<script>
import buttonQuestion from "@/digital-components/button-question/button-question";

// 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",
    props: {
        modelValue: {
            isVehicleProtected: Boolean,
        },
        cmsWidgetName: String,
    },
    components: {
        buttonQuestion,
    },
    computed: {
        questionText() {
            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
        },
        selectedValue: {
            get: function () {
                return this.modelValue;
            },
            set: function (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>
