<script setup lang="ts">
import { useToastStore } from "@/stores/toast";

const toastStore = useToastStore();
</script>

<template>
  <div class="toast-container">
    <transition-group name="toast">
      <div
        v-for="toast in toastStore.toasts"
        :key="toast.id"
        class="toast"
        :class="`toast--${toast.type}`"
      >
        <span class="toast-msg">{{ toast.message }}</span>
        <button class="toast-close" aria-label="Dismiss notification" @click="toastStore.dismiss(toast.id)">&times;</button>
      </div>
    </transition-group>
  </div>
</template>

<style scoped>
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.toast {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  color: var(--fs-text-on-action);
  font-size: 0.9rem;
  box-shadow: 0 2px 8px var(--color-shadow);
  min-width: 200px;
}
.toast-msg {
  flex: 1;
}
.toast-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 0.15rem;
}
.toast-close:hover {
  color: var(--fs-text-on-action);
}
.toast--success {
  background: var(--color-toast-success);
}
.toast--error {
  background: var(--color-toast-error);
}
.toast--warning {
  background: var(--color-warning);
  color: #1a1a1a;
}
.toast--warning .toast-close {
  color: rgba(0, 0, 0, 0.5);
}
.toast--warning .toast-close:hover {
  color: #1a1a1a;
}
.toast-enter-active,
.toast-leave-active {
  transition: all 0.3s ease;
}
.toast-enter-from {
  opacity: 0;
  transform: translateX(100%);
}
.toast-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
</style>
