<template>
  <Teleport to="body">
    <div
      class="fixed bottom-4 right-4 z-[9998] flex flex-col gap-2 max-w-sm w-full pointer-events-none"
      aria-live="polite"
      aria-label="Notifications"
    >
      <TransitionGroup name="toast">
        <div
          v-for="t in toasts"
          :key="t.id"
          class="pointer-events-auto rounded-lg px-4 py-3 shadow-lg border backdrop-blur-sm flex items-center gap-2 min-w-0"
          :class="
            t.type === 'error'
              ? 'bg-error/95 text-error-content border-error/30'
              : t.type === 'info'
                ? 'bg-info/95 text-info-content border-info/30'
                : 'bg-success/95 text-success-content border-success/30'
          "
          role="alert"
        >
          <span class="flex-1 text-sm font-medium truncate">{{ t.text }}</span>
          <button
            type="button"
            class="btn btn-ghost btn-xs btn-circle shrink-0 opacity-70 hover:opacity-100"
            aria-label="Dismiss"
            @click="dismiss(t.id)"
          >
            <span class="text-lg leading-none font-light" aria-hidden="true">×</span>
          </button>
        </div>
      </TransitionGroup>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
const { toasts, dismiss } = useToast()
</script>

<style scoped>
.toast-enter-active,
.toast-leave-active {
  transition: all 0.2s ease;
}
.toast-enter-from,
.toast-leave-to {
  opacity: 0;
  transform: translateX(1rem);
}
.toast-move {
  transition: transform 0.2s ease;
}
</style>
