<template>
  <div
    v-if="visible"
    :class="[
      'fixed top-4 right-4 z-50 flex items-center p-4 rounded-lg shadow-lg transition-all duration-300 transform',
      visible ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0',
      toastClasses
    ]"
  >
    <div class="flex-shrink-0">
      <component :is="iconComponent" class="h-5 w-5" />
    </div>
    <div class="ml-3 flex-1">
      <p class="text-sm font-medium">{{ message }}</p>
    </div>
    <button
      @click="close"
      class="ml-4 flex-shrink-0 rounded-md p-1 hover:bg-black/10 focus:outline-none focus:ring-2 focus:ring-offset-2"
    >
      <X class="h-4 w-4" />
    </button>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { CheckCircle, AlertCircle, Info, AlertTriangle, X } from 'lucide-vue-next'

interface Props {
  type?: 'success' | 'error' | 'warning' | 'info'
  message: string
  duration?: number
  autoClose?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  type: 'info',
  duration: 5000,
  autoClose: true
})

const emit = defineEmits<{
  close: []
}>()

const visible = ref(false)

const toastClasses = computed(() => {
  switch (props.type) {
    case 'success':
      return 'bg-green-50 border border-green-200 text-green-800'
    case 'error':
      return 'bg-red-50 border border-red-200 text-red-800'
    case 'warning':
      return 'bg-yellow-50 border border-yellow-200 text-yellow-800'
    case 'info':
    default:
      return 'bg-blue-50 border border-blue-200 text-blue-800'
  }
})

const iconComponent = computed(() => {
  switch (props.type) {
    case 'success':
      return CheckCircle
    case 'error':
      return AlertCircle
    case 'warning':
      return AlertTriangle
    case 'info':
    default:
      return Info
  }
})

const close = () => {
  visible.value = false
  setTimeout(() => {
    emit('close')
  }, 300)
}

onMounted(() => {
  visible.value = true
  
  if (props.autoClose) {
    setTimeout(() => {
      close()
    }, props.duration)
  }
})
</script>
