/* global React */
const { useEffect, useRef } = React;

// Helper: a canvas that boots a generative engine
function ArtCanvas({ engine, opts, className, style }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current || !window.GenArt) return;
    const fn = window.GenArt[engine];
    if (!fn) return;
    const handle = window.GenArt.attach(ref.current, fn, opts || {});
    return () => {
      // engines are passive — they pause on offscreen via IO
    };
  }, [engine]);
  return <canvas ref={ref} className={className} style={style} />;
}

window.ArtCanvas = ArtCanvas;