<template>
  <transition name="fade">
    <div :class="['notification' ,'is-light', `is-${notification.level || 'info'}`]" v-if="ready">
      <button class="delete" @click="close()"></button>
      {{notification.message}}
    </div>
  </transition>
</template>

<script lang="ts">
export default {
  name: "Notification",
  props: ["notification"],
  mounted() {
    this.ready = true;
  },
  data() {
    return {
      ready: false
    };
  },
  methods: {
    close() {
      this.$emit("onClose");
    }
  }
};
</script>
