<template>
  <div>
    <div :class="cssClass">
      <button class="delete" @click="onClose" aria-label="close"></button>
      <div>
        <slot />
      </div>
    </div>
  </div>
</template>

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

import ClickEvent from '../../core/events/ClickEvent'

@Component({
  name: 'base-notification'
})
export default class BaseNotification extends Vue {
  @Prop({ default: false }) readonly error!: boolean

  get cssClass () {
    return {
      'notification is-white': true,
      'is-marginless': true,
      'is-danger': this.error !== false,
      'has-shadow': true
    }
  }

  onClose () {
    const event = new ClickEvent<void>()
    event.action = 'close'
    this.$emit('click', event)
  }
}
</script>

<style lang="scss" scoped>
button.delete {
  padding: 0px;
}

@import "../../core/base/bulma.scss";
@import "bulma/sass/elements/other.sass";
$notification-padding: 0.5rem 1.5rem 0.5rem 1rem;
@import "bulma/sass/elements/notification.sass";

.has-shadow {
  box-shadow: 0 5px 10px #00000030;
}
</style>
