import { useLoader } from "@react-three/fiber";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

interface MultiGLTFInstancesProps {
  index: number;
  modelUrl: string;
  position: [number, number, number];
  rotation: [number, number, number];
  visibility?: boolean;
}

export const MultiGLTFInstances: React.FC<MultiGLTFInstancesProps> = ({
  index,
  modelUrl,
  position,
  rotation,
  visibility
}) => {
  const originalGltf = useLoader(GLTFLoader, modelUrl, (loader) => {
    const draco = new DRACOLoader();
    draco.setDecoderPath(
      "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/"
    );
    loader.setDRACOLoader(draco);
  });
  const cloned = originalGltf.scene.clone();
  cloned.name = `rigged_arm_${index}`; // Set the name of the cloned object
  console.log(index);
  return (
    <>
      <primitive
        key={index}
        object={cloned}
        position={position}
        scale={[1, 1, 1]}
        rotation={rotation}
        visible={visibility}
      />
    </>
  );
};