// Cinematic level up + toast surfaces

const LevelUp = ({ newLevel, onDone }) => {
  React.useEffect(() => {
    const t = setTimeout(onDone, 3200);
    return () => clearTimeout(t);
  }, []);
  return (
    <div className="celeb" onClick={onDone}>
      <div className="rays" />
      <div className="celeb-card">
        <div className="eyebrow">Ascensão</div>
        <h1>LEVEL UP</h1>
        <div className="new-lvl">Você alcançou o <strong>Nível {newLevel}</strong></div>
        <button className="btn gold lg"><I.crown /> Continuar a campanha</button>
      </div>
    </div>
  );
};

const Toasts = ({ toasts }) => (
  <div className="toast-wrap">
    {toasts.map((t) => {
      const isError  = t.kind === 'error';
      const isForge  = t.kind === 'forge';
      return (
        <div key={t.id} className={`toast ${isError ? 'crimson' : isForge ? 'violet' : ''}`}>
          <div className="ti">
            {isError ? <I.x /> : isForge ? <I.scroll /> : <I.bolt />}
          </div>
          <div>
            <div className="tt">{t.title}</div>
            <div className="tx">
              {isError
                ? (t.message || 'Algo deu errado')
                : `+${t.xp} XP ${isForge ? 'em jogo' : 'ganhos'}`
              }
            </div>
          </div>
        </div>
      );
    })}
  </div>
);

window.LevelUp = LevelUp;
window.Toasts  = Toasts;