<template>
  <b-button
    class="
      d-flex
      btn
      shadow-none
      align-items-center
      border-0
      akkurat-bold
      btn-custom
      mx-2
    "
    :style="`background: ${btnColor}`"
    @click="clicked"
    :disabled="loading"
  >
  <div class="d-flex flex-fill justify-content-around align-items-center">
    <b-spinner v-if="loading" small type="grow"></b-spinner>
    <font-awesome-icon v-else :icon="icon" />
    <div class="akkurat-bold align-self-center flex-fill">{{ title }}</div>
  </div>
  </b-button>
</template>

<script>
export default {
  name: 'signup-button',
  props: {
    title: {
      type: String,
      required: true,
    },
    icon: {
      type: String,
    },
    routerName: {
      type: String,
    },
    btnColor: {
      type: String,
    },
    loading:{
      type: true,
      default: false
    }
  },
  methods: {
    clicked() {
      if(typeof this.routerName == 'undefined')
        this.$emit('clicked');
      else
          this.$router.push({ name: this.routerName });

    },
  },
};
</script>

<style scoped lang="scss">
@import '../../assets/css/main.scss';
@import '../../assets/css/cards.scss';

.btn-custom {
  width: 236px;
  border-radius: 20px;
  height: 40px;
}
</style>
