<script setup lang="ts">
import { useToast } from '@/composables/useToast'
import { CheckCircle2, XCircle, Info, X } from 'lucide-vue-next'

const { toasts, dismiss } = useToast()

const icons: Record<string, any> = {
  success: CheckCircle2,
  error: XCircle,
  info: Info,
}

const colors: Record<string, string> = {
  success: 'border-l-green-500',
  error: 'border-l-red-500',
  info: 'border-l-blue-500',
}
</script>

<template>
  <div class="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm">
    <div
      v-for="t in toasts"
      :key="t.id"
      :class="['flex items-start gap-3 p-3 rounded-lg border bg-card border-l-[3px] text-xs shadow-lg animate-[slideIn_0.3s_ease]', colors[t.type]]"
    >
      <component :is="icons[t.type]" class="size-4 shrink-0 mt-0.5" :class="t.type === 'success' ? 'text-green-500' : t.type === 'error' ? 'text-red-500' : 'text-blue-500'" />
      <div class="flex-1 min-w-0">
        <p class="font-medium text-foreground">{{ t.title }}</p>
        <p v-if="t.message" class="text-muted-foreground mt-0.5 break-words">{{ t.message }}</p>
      </div>
      <button class="text-muted-foreground hover:text-foreground shrink-0" @click="dismiss(t.id)">&times;</button>
    </div>
  </div>
</template>

<style scoped>
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
</style>
