import { useCallback, useMemo, useState, type ReactNode } from 'react';
import { BackdropArtContext, type BackdropArtValue } from './backdrop-art-context';

/**
 * Lets a route hand procedural art to the app-wide backdrop.
 *
 * The backdrop is mounted once, fixed behind everything, so pages can't render
 * into it directly — they publish here instead and `AppBackdrop` picks it up.
 * That keeps the art *behind* the glass panes rather than boxed inside a hero
 * strip, which is the whole reason the refraction reads as glass.
 */
export const BackdropArtProvider = ({ children }: { children: ReactNode }) => {
  const [art, setArtState] = useState<ReactNode>(null);
  const setArt = useCallback((next: ReactNode) => setArtState(next), []);
  const value = useMemo<BackdropArtValue>(() => ({ art, setArt }), [art, setArt]);

  return <BackdropArtContext.Provider value={value}>{children}</BackdropArtContext.Provider>;
};