<template>
  <div class="radiogroup radio-list-button d-flex flex-column w-100">
    <input type="radio"
    v-bind:id="radioID"
    v-bind:name="groupName"
    v-bind:value="radioID">
    <label role="radio" tabindex="0" aria-checked="false"
    v-bind:for="radioID"
    class="mb-2 d-flex align-items-center justify-content-between p-2"
    @click='displayComponent'
    >{{radioID}}
    <loader
    v-if="display"
    v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
    v-bind:class="[this.loaderColor, this.loaderPosition]"
    />
  </label>
  <p class="small">{{errorMessage}}</p>
</div>
</template>

<script>
import loader from "@/ux-components/loader/loader";
export default {
  name: "radioList",
  props: [
    "groupName",
    "ariaLabelBy",
    "radioID",
    "errorMessage",
    "loaderColor",
    "loaderPosition",
    "sizeInRem"

  ],
  data() {
    return {
      isError: false,
      display: false
    };
  },
  methods: {
    displayComponent() {
      this.display = true;
    },
  },
  components: {
    loader,
  },
};
</script>
