<template>
  <transition name="bx-animate-fade">
    <div
      class="bx-toast"
      v-if="visible"
      >
      <div
        class="bx-toast-inner"
        :class="icon && 'bx-toast-block'"
        >
        <bxs-icon
          class="bx-toast-icon"
          :name="icon"
          v-if="icon"
          />
        <span class="bx-toast-text">
          {{ message }}
        </span>
      </div>
    </div>
  </transition>
</template>
<script>
import { create } from '../utils/index'
import Icon from '../icon'

export default create({
  name: 'toast',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    message: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
  },
  components: {
    [Icon.name]: Icon,
  },
})
</script>
<style lang="postcss">
@import './index.css';
@import '../../src/style/animate.css';
</style>
