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

<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    icon: {
      type: String,
    },
  },
  methods: {
    emitToParent() {
      this.$emit('clicked');
    },
  },
};
</script>

<style scoped>
  .btn-div-default {
    border-radius: 20px;
    background: #FF9B64;
  }

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

  .btn-div-styling {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.5)
  }

</style>
