<template>
  <div class="alert fade show text-center" role="alert"
    v-bind:isDismissable="isDismissable"
    v-bind:class="[isDismissable ? 'alert-dismissible' : '', this.alertClass]"
    >
    <strong>{{alertHeading}}</strong>
    <p class="m-0 text-body">{{alertText}}</p>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"
    v-bind:class="[isClose ? '' : 'visually-hidden']"
    ></button>
  </div>
</template>

<script>
export default {
  name: "alert",
  props: {
    alertHeading: String,
    alertText: String,
    alertClass: String
  },
  data() {
    return {
      isDismissable: true,
      isClose: true
    };
  }
};
</script>
