<template>
  <div class="d-flex flex-column w-100">
    <button
      class="
        btn
        list-button
        d-flex
        align-items-center
        justify-content-between
        py-3
        px-4
      "
      @click="displayComponent"
      v-bind:class="[this.isError ? 'error' : '']"
    >
      <span class="m-0">{{ this.buttonText }}</span>
      <loader
        v-if="display"
        v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
        v-bind:class="[this.loaderColor, this.loaderPosition]"
      />
    </button>
    <label class="small mt-1">{{ this.errorText }}</label>
  </div>
</template>

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