<template>
  <b-button
    block
    class="
      d-flex
      btn shadow-none
      align-items-center
      justify-content-center
      btn-hover
      akkurat-bold
      border-0
      btn-footer"
    @click="goTo"
  >
    <font-awesome-icon :icon="icon" />
    <div class="ml-3">{{ title }}</div>
  </b-button>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    icon: {
      type: String,
    },
    routerName: {
      type: String,
    },
  },
  methods: {
    goTo() {
      if (this.$router.history.current.name === this.routerName) {
        return;
      }
      this.$router.push({ name: this.routerName });
    },
  },
};
</script>

<style scoped>
  .btn-footer {
    border-radius: 20px;
    background: #FF9B64;
    flex: column;
  }

  .btn-hover:hover {
    background: #FF9B64;
  }

</style>
