<script setup lang="ts">
import { useToastStore } from '../stores/toast'
import { Check, AlertCircle, Info } from 'lucide-vue-next'

const toastStore = useToastStore()
</script>

<template>
  <div class="fixed top-4 left-1/2 -translate-x-1/2 z-[100] flex flex-col gap-2 pointer-events-none" style="margin-left: 24px;">
    <div
      v-for="toast in toastStore.toasts"
      :key="toast.id"
      @click="toastStore.removeToast(toast.id)"
      class="w-80 flex items-center gap-3 px-4 py-3 bg-bg-surface border border-border-subtle rounded-lg shadow-lg cursor-pointer pointer-events-auto border-l-[3px]"
      :class="[
        toast.exiting ? 'animate-toast-exit' : 'animate-toast-enter',
        toast.type === 'success' ? 'border-l-status-running' : '',
        toast.type === 'error' ? 'border-l-status-error' : '',
        toast.type === 'info' ? 'border-l-accent' : ''
      ]"
    >
      <Check v-if="toast.type === 'success'" class="w-4 h-4 text-status-running shrink-0" :stroke-width="2" />
      <AlertCircle v-if="toast.type === 'error'" class="w-4 h-4 text-status-error shrink-0" :stroke-width="2" />
      <Info v-if="toast.type === 'info'" class="w-4 h-4 text-accent shrink-0" :stroke-width="2" />
      <span class="text-sm text-text-primary">{{ toast.message }}</span>
    </div>
  </div>
</template>
