<template>
  <button 
    type="button" 
    class="btn"
    v-bind:class="[(this.buttonType === 'btn-funnel' ? ['btn-funnel', 'border', 'rounded', 'w-100', 'text-start'] : this.buttonType)]"
    v-on:click="this.buttonType === 'btn-funnel' ? showLoader() : null"
    >
    {{ this.buttonText }}


    <!-- Spinner for funnel Button -->
    <div v-if="this.buttonType === 'btn-funnel' && this.isLoading" class="spinner-border spinner-border-sm text-success" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
    
  </button>
</template>

<script>
export default {
  name: 'button',
  props: {
    buttonText: String,
    buttonType: String
  }, 
  data(){
    return {
      isLoading: false
    }
  },
  methods: {
    showLoader(){
      this.isLoading = true;
    }
  }
}
</script>
