import { Canvas, type CanvasProps } from "@react-three/fiber";
import { forwardRef, useImperativeHandle, useRef } from "react";
import { useOnScreen } from "../hooks/useOnScreen";

export const SmartCanvas = forwardRef<HTMLCanvasElement, CanvasProps>(
  (props, ref) => {
    const canvas = useRef<HTMLCanvasElement>(null!);
    const onScreen = useOnScreen(canvas);

    useImperativeHandle(ref, () => canvas.current!, []);

    return (
      <Canvas
        frameloop={onScreen ? "demand" : "never"}
        ref={canvas}
        {...props}
      />
    );
  }
);