<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 p-2"
    v-on:click="showLoader()"
    v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading',this.isError ? 'error' : '']"
    >{{radioID}}</label>
    <p class="small">{{errorMessage}}</p>
  </div>
</template>

<script>
export default {
  name: "radioList",
  props: [
    "groupName",
    "ariaLabelBy",
    "radioID",
    "errorMessage"

  ],
  data() {
    return {
      isLoading: false,
      isError: false
    };
  },
  methods: {
    showLoader() {
      this.isLoading = true;
    },
  },
};
</script>
