import { useFrame, useLoader } from "@react-three/fiber";
import { forwardRef, useImperativeHandle, useRef } from "react";
import { Mesh, TextureLoader } from "three";

const SealCube = forwardRef<Mesh>((props, ref) => {
    const texture = useLoader(TextureLoader, 'niko/img/niko.jpg');
    const meshRef = useRef<Mesh>(null);

    useImperativeHandle(ref, () => meshRef.current!, []);

    useFrame((state, delta) => {
        if (meshRef.current) {
            meshRef.current.rotation.x += delta * 0.5;
            meshRef.current.rotation.y += delta * 0.5;
        }
    });

    return (
        <mesh ref={meshRef} position={[0, 3, 0]} castShadow receiveShadow>
            <boxGeometry args={[0.85, 0.85, 0.85]} />
            <meshBasicMaterial map={texture} depthWrite={true} />
        </mesh>
    );
});
SealCube.displayName = 'SealCube';

export default SealCube;