<template>
<div>
    <input
        type="radio"
        :id="this.value"
        :value="this.value"
        class="position-absolute opacity-0"
        v-on:click="showLoader()"
    />
    <label
        :for="this.value"
        class="btn list-button d-flex align-items-center"
        v-bind:class="[this.isLoading ? 'button-loader' : '']"
    >
        <span>{{ text }}</span>
    </label>
</div>
  
</template>

<script>
export default {
  name: "radio",
  props: [
    "value",
    "text"
  ],
  data() {
    return {
      isLoading: false,
    };
  },
  methods: {
    showLoader() {
      this.isLoading = true;
    },
  },
};
</script>
