← snapshot

"use client";

import { useEffect, useRef } from "react";
import { registerGlslTile } from "@/lib/lab/glsl-pool";
import type { GlslVariant } from "@/lib/lab/glsl-variants";
import type { LabState } from "./lab-types";

/**
 * A raymarched figure. The canvas here is a plain 2D surface: the actual
 * shading happens in the shared pool, which owns the single WebGL context the
 * whole gallery draws through. See `lib/lab/glsl-pool.ts` for why.
 */
export function GlslTile({
  variant,
  size,
  state,
  active,
}: {
  variant: GlslVariant;
  size: number;
  state: React.RefObject<LabState>;
  active: boolean;
}) {
  const ref = useRef<HTMLCanvasElement | null>(null);
  const activeRef = useRef(active);
  activeRef.current = active;

  useEffect(() => {
    const target = ref.current;
    if (!target) return;
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    return registerGlslTile({
      variant,
      target,
      px: Math.round(size * dpr),
      read: () => (activeRef.current ? state.current : null),
    });
  }, [variant, size, state]);

  return <canvas ref={ref} style={{ width: size, height: size, display: "block" }} />;
}