<template>
  <div class="radio_question">
    <div class="needed_car_info mt-6 mb-4 d-flex">
      <span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
        questionText
      }}</span>
    </div>
    <div class="w-100 d-flex justify-content-center">
      <fieldset class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
        <legend class="sr-only">{{groupName}}</legend>
          <radio v-for="answer in answers" :key="answer"
            :radioID="answer"
            @click="chooseAnswer(answer)"
            loaderColor="blue"
            loaderPosition="right"
            sizeInRem="1.5"
            data-test="radio"
            :groupName="groupName"
            textPosition="text-start"
            isRequired=true
            :value="modelValue"
            screenReaderOnlyText="(opens new window)"
          />
      </fieldset>
    </div>
  </div>
</template>

<script>
import radio from "@/ux-components/radio/radio";
export default {
  name: "radio-question",
  props: {
    questionText: String,
    answers: Array,
    modelValue: String,
    groupName: String
  },
  methods: {
    chooseAnswer(answer) {
      this.$emit("update:modelValue", answer);
    },
  },
  components: {
    radio,
  },
};
</script>
