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

function SolarSystem() {
  const earthOrbitRef = useRef()
  const moonOrbitRef = useRef()
  const earthRef = useRef()

  useFrame((_, delta) => {
    earthOrbitRef.current.rotation.y += delta * 0.9
    moonOrbitRef.current.rotation.y += delta * 2.2
    earthRef.current.rotation.y += delta * 2.1
  })

  return (
    <>
      <ambientLight intensity={0.2} />
      <pointLight position={[0, 0, 0]} intensity={120} />

      <mesh scale={[2.4, 2.4, 2.4]}>
        <sphereGeometry args={[1, 32, 32]} />
        <meshStandardMaterial color="#ffcc55" emissive="#ffaa00" emissiveIntensity={1.2} />

        <group ref={earthOrbitRef}>
          <mesh ref={earthRef} position={[8, 0, 0]} scale={[0.65, 0.65, 0.65]}>
            <sphereGeometry args={[1, 32, 32]} />
            <meshStandardMaterial color="#2a66ff" roughness={0.9} metalness={0.05} />

            <group ref={moonOrbitRef}>
              <mesh position={[2.2, 0, 0]} scale={[0.28, 0.28, 0.28]}>
                <sphereGeometry args={[1, 32, 32]} />
                <meshStandardMaterial color="#bbbbbb" roughness={1} metalness={0} />
              </mesh>
            </group>
          </mesh>
        </group>
      </mesh>
    </>
  )
}

function App() {
  return (
    <Canvas camera={{ fov: 60, near: 0.1, far: 100, position: [0, 0, 22] }}>
      <color attach="background" args={['#000000']} />
      <SolarSystem />
    </Canvas>
  )
}

export default App