<script setup lang="ts">
import { useToastStore } from '@/stores/toast'
import { CheckCircle, XCircle, AlertCircle, Info, X } from 'lucide-vue-next'

const toastStore = useToastStore()

const iconMap = {
  success: CheckCircle,
  error: XCircle,
  warning: AlertCircle,
  info: Info,
}

const colorMap = {
  success: 'bg-emerald-500 text-white',
  error: 'bg-red-500 text-white',
  warning: 'bg-amber-500 text-white',
  info: 'bg-blue-500 text-white',
}
</script>

<template>
  <div class="fixed bottom-6 right-6 z-[9999] space-y-3 max-w-sm w-full pointer-events-none">
    <TransitionGroup
      enter-active-class="transition-all duration-300"
      enter-from-class="opacity-0 translate-x-full"
      enter-to-class="opacity-100 translate-x-0"
      leave-active-class="transition-all duration-200"
      leave-from-class="opacity-100 translate-x-0"
      leave-to-class="opacity-0 translate-x-full"
      move-class="transition-all duration-300"
    >
      <div
        v-for="toast in toastStore.toasts"
        :key="toast.id"
        class="pointer-events-auto rounded-lg shadow-lg p-4 flex items-center gap-3"
        :class="colorMap[toast.type]"
      >
        <component :is="iconMap[toast.type]" class="w-5 h-5 flex-shrink-0" />
        <p class="flex-1 font-medium">{{ toast.message }}</p>
        <button
          @click="toastStore.removeToast(toast.id)"
          class="flex-shrink-0 p-1 hover:bg-white/20 rounded transition-colors"
        >
          <X class="w-4 h-4" />
        </button>
      </div>
    </TransitionGroup>
  </div>
</template>
