<template>
  <transition name="toast-fade">
    <div v-if="visible" class="toast" :class="type">
      {{ message }}
    </div>
  </transition>
</template>

<script>
export default {
  name: 'Toast',
  data() {
    return {
      visible: false,
      message: '',
      type: 'info',
      timer: null
    }
  },
  methods: {
    show(message, type = 'info', duration = 2000) {
      this.message = message;
      this.type = type;
      this.visible = true;
      
      if (this.timer) {
        clearTimeout(this.timer);
      }
      
      this.timer = setTimeout(() => {
        this.visible = false;
      }, duration);
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer);
    }
  }
}
</script>

<style scoped>
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  z-index: 10000;
  max-width: 80%;
  text-align: center;
  background: rgba(0, 0, 0, 0.75);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.toast.success {
  background: rgba(82, 196, 26, 0.9);
}

.toast.error {
  background: rgba(245, 34, 45, 0.9);
}

.toast.warning {
  background: rgba(250, 173, 20, 0.9);
}

.toast-fade-enter-active,
.toast-fade-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

.toast-fade-enter,
.toast-fade-leave-to {
  opacity: 0;
  transform: translate(-50%, -30%);
}
</style> 