<template>
  <div class="toast-container">
    <transition-group name="toast" tag="div">
      <div
        v-for="t in toasts"
        :key="t.id"
        class="toast glass"
        :class="t.type"
        @click="dismiss(t.id)"
      >
        <div class="dot" />
        <span class="msg">{{ t.message }}</span>
      </div>
    </transition-group>
  </div>
  
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useToastStore } from '~/stores/toast'

const toast = useToastStore()
const { toasts } = storeToRefs(toast)
const dismiss = (id: number) => toast.remove(id)
</script>

<style scoped>
.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast-enter-active, .toast-leave-active {
  transition: all 250ms ease;
}
.toast-enter-from, .toast-leave-to {
  opacity: 0;
  transform: translateY(-8px);
}

.toast {
  pointer-events: auto;
  min-width: 240px;
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(17, 24, 39, 0.6);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.glass { /* keep naming consistent with app */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.toast .dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--accent-primary);
}

.toast.success .dot { background: #22c55e; }
.toast.error .dot { background: #ef4444; }
.toast.info .dot { background: #60a5fa; }

.msg {
  line-height: 1.2;
}
</style>
