<template>
  <div v-bind:class="computedAlertClassNames()">
    <button
      class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
      @click="onClickClose()"
    >
      <fa icon="xmark"></fa>
    </button>
    <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
    <p>{{ alertMessage }}</p>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-facing-decorator";

@Component
export default class AlertMessage extends Vue {
  @Prop alertTitle = "";
  @Prop alertMessage = "";
  isAlertVisible = this.alertMessage;

  public onClickClose() {
    this.isAlertVisible = false;
  }

  public computedAlertClassNames() {
    return {
      hidden: !this.isAlertVisible,
      "dismissable-alert": true,
      "bg-slate-100": true,
      "p-5": true,
      rounded: true,
      "drop-shadow-lg": true,
      fixed: true,
      "top-3": true,
      "inset-x-3": true,
      "transition-transform": true,
      "ease-in": true,
      "duration-300": true,
    };
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
