<template>
  <div v-if="visible" :class="toastClass" class="fixed top-4 right-4 px-6 py-4 rounded-lg shadow-lg z-50 transition-all">
    <div class="flex items-center gap-3">
      <span class="text-2xl">{{ icon }}</span>
      <span class="font-medium">{{ message }}</span>
    </div>
  </div>
</template>

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

const props = defineProps({
  message: String,
  type: {
    type: String,
    default: 'success',
  },
  duration: {
    type: Number,
    default: 3000,
  },
});

const visible = ref(false);

const toastClass = computed(() => {
  const classes = {
    success: 'bg-green-500 text-white',
    error: 'bg-red-500 text-white',
    warning: 'bg-yellow-500 text-white',
    info: 'bg-blue-500 text-white',
  };
  return classes[props.type] || classes.success;
});

const icon = computed(() => {
  const icons = {
    success: '✓',
    error: '✕',
    warning: '⚠',
    info: 'ℹ',
  };
  return icons[props.type] || icons.success;
});

watch(() => props.message, (newVal) => {
  if (newVal) {
    visible.value = true;
    setTimeout(() => {
      visible.value = false;
    }, props.duration);
  }
});
</script>
