import { h } from 'preact';
import { useStore } from '@nanostores/preact';
import { $toasts } from '../stores/toastStore';

export default function ToastContainer() {
  const toasts = useStore($toasts);

  return (
    <div class="fixed top-5 right-5 z-[9999] flex flex-col gap-2">
      {toasts.map((toast) => (
        <div 
          key={toast.id}
          class={`p-4 rounded-xl shadow-lg text-white font-bold transition-all ${
            toast.type === 'error' ? 'bg-red-600' : 'bg-blue-600'
          }`}
        >
          {toast.message}
        </div>
      ))}
    </div>
  );
}