import React, { useRef } from 'react'
import { PCone } from './PCone'
import { Radiat } from './Radiat'
import GroupStar from './GroupStar'
import Skybox from './Skybox'
import { useFrame } from '@react-three/fiber'
import { Gas } from './Gas'

export function Space(props: JSX.IntrinsicElements['group']) {

  const ref = useRef<any>(null)

  useFrame((state)=>{
    if(ref.current){
      const t = state.clock.getElapsedTime()
      ref.current.rotation.y = 0.2 * Math.sin(t*0.1)
      ref.current.rotation.z = 0.1 * Math.sin(t*0.05)
    }
  })

  return (
    <group {...props} dispose={null}>
      <group scale={20} ref={ref}>
        <PCone/>
        <Radiat position={[10, -4, 10]} scale={1}/>
        <Gas scale={30}/>
      </group>
      <GroupStar/>
      <Skybox/>
    </group>
  )
}