<template>
    <transition name="fade" mode="out-in">
        <div class="windshield-damage-type-question" v-if="isAvailable" aria-live="polite">
            <buttonQuestion
                :questionText="questionText"
                :answers="answersFromCms"
                :groupName="groupName"
                buttonTypeString="listCard"
                v-model="selectedValues"
                :suppressError="suppressError"
                :validationRules="validationRules"
                isRequired />
        </div>
    </transition>
</template>

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

export default {
    name: "windshieldDamageTypeQuestion",
    props: {
        modelValue: String,
        groupName: String,
        isAvailable: Boolean,
        suppressError: Boolean,
        validationRules: String,
        cmsWidgetName: String,
    },
    computed: {
        questionText() {
            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
        },
        answersFromCms() {
            return this.getCmsContent(this.cmsWidgetName, "Answers");
        },
        selectedValues: {
            get: function () {
                return this.modelValue;
            },
            set: function (newValue) {
                this.$emit("update:modelValue", newValue);
            },
        },
    },
    components: {
        buttonQuestion,
    },
};
</script>
