<script setup>
import { useToast } from '@/composables/useToast'
const { state } = useToast()
</script>
<template>
  <teleport to="body">
    <div class="fixed top-2 left-0 right-0 z-50 flex flex-col items-center gap-2 pointer-events-none">
      <transition-group name="toast">
        <div v-for="t in state.list" :key="t.id"
          class="px-4 py-2 rounded-full text-sm shadow-card"
          :class="t.type==='error' ? 'bg-danger text-white' : 'bg-neutral-800/90 text-white'">
          {{ t.msg }}
        </div>
      </transition-group>
    </div>
  </teleport>
</template>
<style>
.toast-enter-active,.toast-leave-active{transition:all .25s ease}
.toast-enter-from,.toast-leave-to{opacity:0;transform:translateY(-8px)}
</style>
