<script setup lang="ts">
import { useUiStore } from '../../stores/ui'

const ui = useUiStore()

const colors = {
  success: 'bg-green-600/90 border-green-500',
  error: 'bg-red-600/90 border-red-500',
  info: 'bg-dark-700/90 border-dark-600',
}
</script>

<template>
  <div class="fixed bottom-4 right-4 z-50 space-y-2">
    <transition-group name="toast">
      <div
        v-for="toast in ui.toasts"
        :key="toast.id"
        :class="['px-4 py-3 rounded-lg border text-sm text-white shadow-lg max-w-sm', colors[toast.type]]"
      >
        {{ toast.message }}
      </div>
    </transition-group>
  </div>
</template>

<style scoped>
.toast-enter-active { transition: all 0.3s ease; }
.toast-leave-active { transition: all 0.3s ease; }
.toast-enter-from { transform: translateX(100px); opacity: 0; }
.toast-leave-to { transform: translateX(100px); opacity: 0; }
</style>
