import { Stage, useGLTF } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

export const ModelViewer3D = ({
  fileUrl,
  height = "100%",
}: {
  fileUrl: string;
  height: string;
}) => {
  const { scene } = useGLTF(fileUrl);

  return (
    <Canvas style={{ width: "100%", height: height }}>
      <ambientLight />
      <directionalLight />
      <Stage environment="city" intensity={0.6}>
        <primitive object={scene} />
      </Stage>
      <OrbitControls />
    </Canvas>
  );
};