import React from "react";
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%",
  onLoad,
}: {
  fileUrl: string;
  height: string;
  onLoad?: () => void;
}) => {
  const { scene } = useGLTF(fileUrl);

  // Вызываем onLoad когда модель загружена
  React.useEffect(() => {
    if (onLoad) {
      onLoad();
    }
  }, [scene, onLoad]);

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