Blame for components/Sun.jsx

import React from 'react';
import { useFrame } from '@react-three/fiber';
import * as THREE from 'three';

const Sun = ({ onClick }) => {
  const sunRef = React.useRef();
  
  useFrame((state) => {
    if (sunRef.current) {
      sunRef.current.rotation.y = state.clock.getElapsedTime() * 0.02;
      sunRef.current.rotation.z = state.clock.getElapsedTime() * 0.01;
    }
  });
  
  return (
    <mesh 
      ref={sunRef} 
      onClick={onClick}
      onPointerOver={() => document.body.style.cursor = 'pointer'}
      onPointerOut={() => document.body.style.cursor = 'auto'}
    >
      <sphereGeometry args={[15, 64, 64]} />
      <meshStandardMaterial 
        emissive="#FFD700" 
        emissiveIntensity={2}
        color="#FF8C00"
        roughness={0.4}
        metalness={0.1}
      />
      {/* Sun glow effect */}
      <pointLight 
        position={[0, 0, 0]} 
        intensity={2} 
        distance={300} 
        color="#FFD700" 
      />
      <pointLight 
        position={[50, 50, 50]} 
        intensity={1} 
        distance={200} 
        color="#FFA500" 
      />
    </mesh>
  );
};

export default Sun;