<template>
  <button
    :disabled="isDisabled"
    :aria-disabled="isDisabled"
    class="btn btn-secondary d-flex align-items-center py-3 px-4"
    @click='displayComponent'
    >
    <span class="m-0">{{ this.buttonText }}</span>
    <loader
    class="ms-2"
    v-if="display"
    v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
    v-bind:class="[this.loaderColor, this.loaderPosition]"
    />
  </button>
</template>

<script>
import loader from "@/ux-components/loader/loader";
export default {
  name: "buttonPrimary",
  props: {
    buttonText: String,
    isDisabled: Boolean,
    loaderColor: String,
    loaderPosition: String,
    sizeInRem: [Number,String]
  },
  data() {
    return {
      display: false,
    };
  },
  methods: {
    displayComponent() {
      this.display = true;
    },
  },
  components: {
    loader,
  },
};
</script>
