<template>
  <transition name="fade">
    <div
      v-if="visible"
      :class="`alert alert-${type} alert-dismissible centered-alert`"
      role="alert"
    >
      <div class="alert-content">
        <span class="alert-message">{{ message }}</span>
        <button
          type="button"
          class="btn-close"
          aria-label="Close"
          @click="close"
        ></button>
      </div>
    </div>
  </transition>
</template>


<script>
export default {
  name: 'Alert',
  props: {
    type: {
        type:String,
        default:'success'
    },
    message:{
        type:String
    },
    duration:{
        type:Number,
        default:5000
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    close() {
      this.visible = false
      setTimeout(() => {
        this.$emit('close')
      }, 500);
    }
  },
  mounted(){
    this.$nextTick(() => {
        this.visible = true
    })
    if(this.duration>0){
        setTimeout(() => {
            this.close()
        }, this.duration);
    }
  }
}
</script>

<style scoped>
.centered-alert {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  min-width: 300px;
  max-width: 600px;
}

.alert-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.alert-message {
  flex: 1;
  word-break: break-word;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
