import { Canvas, useFrame } from '@react-three/fiber'
import { useRef } from 'react'

function GroupedStructure({ position = [0, 0, 0], direction = 1 }) {
	const groupRef = useRef()

	useFrame((state) => {
		const seconds = state.clock.elapsedTime

		if (!groupRef.current) return

		groupRef.current.rotation.y = direction * seconds * 0.7
		groupRef.current.rotation.x = Math.sin(seconds * 1.1) * 0.2
	})

	return (
		<group ref={groupRef} position={position}>
			<mesh position={[0, -0.2, 0]}>
				<boxGeometry args={[0.7, 1.6, 0.7]} />
				<meshStandardMaterial color="#f6bd60" />
			</mesh>

			<mesh position={[0, 0.95, 0]}>
				<sphereGeometry args={[0.4, 24, 24]} />
				<meshStandardMaterial color="#84a59d" />
			</mesh>
		</group>
	)
}

export default GroupedStructure

// export default function GroupApp() {
// 	return (
// 		<Canvas camera={{ fov: 60, near: 0.1, far: 100, position: [0, 1.2, 8] }}>
// 			<color attach="background" args={['#101418']} />
// 			<ambientLight intensity={0.65} />
// 			<directionalLight intensity={1.1} position={[4, 6, 5]} />

// 			<GroupedStructure position={[-1.4, 0, 0]} direction={1} />
// 			<GroupedStructure position={[1.4, 0, 0]} direction={-1} />
// 		</Canvas>
// 	)
// }