<template>
  <Teleport to="body">
    <div class="notification-stack" aria-live="polite" aria-atomic="false">
      <TransitionGroup name="notification-toast" tag="div" class="notification-stack-list">
        <article
          v-for="message in messages"
          :key="message.id"
          class="notification-toast-card"
          :class="`notification-toast-${message.type}`"
          @mouseenter="pauseToast(message.id)"
          @mouseleave="resumeToast(message.id)"
        >
          <div class="notification-toast-indicator"></div>
          <div class="notification-toast-body">
            <strong>{{ titleMap[message.type] || "系统提示" }}</strong>
            <p>{{ message.text }}</p>
          </div>
          <button class="notification-toast-close" type="button" aria-label="关闭提示" @click="removeToast(message.id)">
            ×
          </button>
        </article>
      </TransitionGroup>
    </div>
  </Teleport>
</template>

<script setup>
import { useNotifications } from "../utils/notifications";

const titleMap = {
  success: "操作成功",
  error: "操作失败",
  info: "系统提示"
};

const { messages, removeToast, pauseToast, resumeToast } = useNotifications();
</script>
