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;
