import { createPortal } from 'react-dom';
import { useToastStore } from '../store/useToast';

export function Toast() {
  const toasts = useToastStore((s) => s.toasts);
  if (toasts.length === 0) return null;
  return createPortal(
    <div aria-live="polite" role="status">
      {toasts.map((t) => (
        <div key={t.id} className="toast is-show">
          {t.message}
        </div>
      ))}
    </div>,
    document.body,
  );
}