/* DAR AYLA OPS V2 — TOAST UI */

function ToastHost() {
  const [toasts, setToasts] = useState([]);
  useEffect(() => { window.registerToastSetter(setToasts); }, []);
  return (
    <div className="toast-host">
      {toasts.map(t => (
        <div key={t.id} className={`toast toast-${t.kind}`}>
          <div className="toast-icon">{t.icon && I[t.icon] ? I[t.icon]() : <I.check/>}</div>
          <div className="toast-body">
            <div className="toast-title">{t.title}</div>
            {t.detail && <div className="toast-detail">{t.detail}</div>}
            {t.endpoint && <div className="toast-endpoint mono">→ {t.endpoint}</div>}
          </div>
        </div>
      ))}
    </div>
  );
}
window.ToastHost = ToastHost;