<template>
  <div class="radio_question">
    <div class="needed_car_info mt-5 mb-2 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">
      <div class="car_list overflow-scroll position-absolute container-fluid pt-1" role="radiogroup" aria-labelledby="select-year-radio-group">
        <h3 class="visually-hidden" id="select-year-radio-group">*</h3>
          <radio v-for="answer in answers" :key="answer"
            :radioID="answer"
            @click="chooseAnswer(answer)"
            loaderColor="blue"
            loaderPosition="right"
            sizeInRem="1.5"
            data-test="radio"
            groupName="radio-list"
            textPosition="text-start"
          />
      </div>
    </div>
  </div>
</template>

<script>
import radio from "@/ux-components/radio/radio";
export default {
  name: "radio-question",
  props: {
    questionText: String,
    answers: Array,
    chooseAnswer: Function,
  },
  components: {
    radio,
  },
};
</script>
