<template>
  <b-button
    v-if="show"
    class="rounded-pill vetro-vue-component-library__cta-button"
    :disabled="isDisabled"
    variant="outline-primary"
    size="lg"
    @click="$emit('buttonClicked')"
  >
    <font-awesome-icon icon="plus" class="mr-2" />
    {{ text }}
  </b-button>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      required: true,
    },
    show: {
      type: Boolean,
      default: true,
    },
    isDisabled: {
      type: Boolean,
      default: false,
    },
  },
};
</script>
<style lang="scss">
.vetro-vue-component-library__cta-button {
  font-family: Lato, sans-serif;
  font-weight: 400;
  transition: transform 0.1s ease-in-out;
  justify-content: space-between;
  align-items: center;
  display: flex;

  &:not(.disabled):hover {
    transform: scale(1.03);
  }
}
</style>
