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

type ModelViewerProps = {
  fileUrl: string;
  height?: string;
};

export const ModelViewer = ({ fileUrl, height = "100%" }: ModelViewerProps) => {
  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>
  );
};