/* ============================================================
   beedle — transient toast notifications (shared)
   One stack of short-lived pills at the bottom of the screen,
   used by both the data room and the forecaster (styles live in
   dataroom.css so both pages pick them up).
   useToasts(): [toasts, toast(msg, { icon, good })]
   <Toast toasts={toasts} /> renders the stack.
   ============================================================ */
function useToasts() {
  const [toasts, setToasts] = React.useState([]);
  const add = (msg, opts = {}) => {
    const id = Math.random().toString(36).slice(2);
    setToasts(t => [...t, { id, msg, ...opts }]);
    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 2600);
  };
  return [toasts, add];
}

function Toast({ toasts }) {
  return (
    <div className="toast-wrap">
      {toasts.map(t => (
        <div className="toast" key={t.id}>
          <Icon name={t.icon || "check"} size={16} className={t.good ? "g" : ""} />{t.msg}
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { useToasts, Toast });