<template>

  <div class="alert d-flex gap-2" :class="`alert-${type}`" role="alert">
    <itf-icon :name="iconName" size="24" />

    <slot>
      <span v-html="message"></span>
    </slot>
  </div>

</template>
<script>
import { Vue, Component, Prop } from 'vue-property-decorator';
import itfIcon from '../icon/Icon';

export default @Component({
  name: 'itfAlert',
  components: {
    itfIcon
  }
})
class itfAlert extends Vue {
  @Prop({ type: String, default: 'info' }) type;
  @Prop({ type: String }) message;
  @Prop({ type: String }) icon;

  get iconName() {
    if (this.icon) {
      return this.icon;
    }
    switch (this.type) {
    case 'danger': return 'warning_hex';
    }
  }
}
</script>
