<script setup lang="ts">
import { useNotifications } from "../../composables/useNotifications";

const { notifications, removeNotification } = useNotifications();

function getIcon(type: string) {
  const icons: Record<string, string> = {
    success: "ph-check-circle",
    error: "ph-x-circle",
    warning: "ph-warning-circle",
    info: "ph-info",
  };
  return icons[type] || "ph-info";
}
</script>

<template>
  <Teleport to="body">
    <div
      class="fixed bottom-6 left-1/2 -translate-x-1/2 z-[1000] flex flex-col gap-2 items-center pointer-events-none"
    >
      <TransitionGroup
        enter-active-class="transition-all duration-300"
        enter-from-class="opacity-0 translate-y-4"
        enter-to-class="opacity-100 translate-y-0"
        leave-active-class="transition-all duration-200"
        leave-from-class="opacity-100 translate-y-0"
        leave-to-class="opacity-0 translate-y-2"
      >
        <div
          v-for="notification in notifications"
          :key="notification.id"
          class="warm-toast bg-warm-bg-surface border border-warm-accent/30 text-warm-text-primary text-sm px-5 py-3 rounded-warm shadow-warm flex items-center gap-2 pointer-events-auto"
        >
          <i
            :class="['ph-bold', getIcon(notification.type), 'text-warm-accent']"
          ></i>
          {{ notification.message }}
        </div>
      </TransitionGroup>
    </div>
  </Teleport>
</template>
