<template>
  <Transition name="toast">
    <div v-if="show" :class="['fixed top-20 right-4 z-[9999] px-6 py-4 rounded-lg shadow-2xl flex items-center gap-3 max-w-md', bgColor]">
      <svg v-if="type === 'success'" class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
      <svg v-else class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
      <span class="font-medium">{{ message }}</span>
    </div>
  </Transition>
</template>

<script setup>
import { computed, watch } from 'vue';

const props = defineProps({
  message: String,
  show: Boolean,
  type: {
    type: String,
    default: 'success'
  }
});

const emit = defineEmits(['close']);

const bgColor = computed(() => {
  return props.type === 'success' ? 'bg-green-500 text-white' : 'bg-red-500 text-white';
});

watch(() => props.show, (newVal) => {
  if (newVal) {
    setTimeout(() => {
      emit('close');
    }, 3000);
  }
});
</script>

<style scoped>
.toast-enter-active, .toast-leave-active {
  transition: all 0.3s ease;
}
.toast-enter-from {
  transform: translateX(100%);
  opacity: 0;
}
.toast-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
</style>
