import type { ReactNode } from "react";
import { Canvas } from "@react-three/fiber";

type SpaceCanvasProps = {
  children: ReactNode;
  camera?: {
    position?: [number, number, number];
    fov?: number;
    near?: number;
    far?: number;
  };
  className?: string;
};

export function SpaceCanvas({ children, camera, className }: SpaceCanvasProps) {
  return (
    <Canvas
      className={className}
      frameloop="always"
      camera={camera ?? { position: [0, 30, 60], fov: 55, near: 0.1, far: 5000 }}
      gl={{ antialias: true, powerPreference: "high-performance", alpha: false, preserveDrawingBuffer: true }}
      dpr={[1, 2]}
      style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
    >
      {children}
    </Canvas>
  );
}
