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;
            meshRef.current.position.y = 3 + Math.sin(state.clock.getElapsedTime() * 1) * 0.15;
        }
    });

    return (
        <mesh ref={meshRef} position={[0, 3, 0]} castShadow receiveShadow>
            <boxGeometry args={[0.85, 0.85, 0.85]} />
            <meshStandardMaterial
                map={texture}
                roughness={0.4}
                metalness={0.1}
                envMapIntensity={1.2}
            />
        </mesh>
    );
});
SealCube.displayName = 'SealCube';

export default SealCube;