<template>
  <Teleport to="body">
    <div 
      v-if="message"
      :class="[
        'fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 transform transition-all duration-300',
        type === 'success' ? 'bg-green-500' : 'bg-red-500',
        'text-white'
      ]"
      :style="{ transform: show ? 'translateY(0)' : 'translateY(-100%)' }"
    >
      {{ message }}
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

interface Props {
  message?: string;
  type?: 'success' | 'error';
  duration?: number;
}

const props = withDefaults(defineProps<Props>(), {
  message: '',
  type: 'success',
  duration: 3000
});

const show = ref(false);
const emit = defineEmits(['close']);

watch(() => props.message, (newVal) => {
  if (newVal) {
    show.value = true;
    setTimeout(() => {
      show.value = false;
      setTimeout(() => {
        emit('close');
      }, 300);
    }, props.duration);
  }
}, { immediate: true });
</script> 