import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'
import { Text } from '@react-three/drei'

const skills = [
  { name: 'Python', position: [5, 0, 0], color: '#3776ab' },
  { name: 'TensorFlow', position: [0, 5, 0], color: '#ff6f00' },
  { name: 'PyTorch', position: [0, 0, 5], color: '#ee4c2c' },
  { name: 'React', position: [-5, 0, 0], color: '#61dafb' },
  { name: 'Node.js', position: [0, -5, 0], color: '#68a063' },
]

export default function OrbitIcons() {
  const groupRef = useRef()

  useFrame((state, delta) => {
    groupRef.current.rotation.y += delta * 0.2
  })

  return (
    <group ref={groupRef}>
      {skills.map((skill, i) => (
        <Text
          key={i}
          position={skill.position}
          fontSize={0.5}
          color={skill.color}
          anchorX="center"
          anchorY="middle"
        >
          {skill.name}
        </Text>
      ))}
    </group>
  )
}