import React from 'react';
import * as THREE from 'three';

const StarField = ({ count = 1000 }) => {
  const starRef = React.useRef();
  
  React.useEffect(() => {
    const geometry = new THREE.BufferGeometry();
    const positions = [];
    const colors = [];
    
    const color = new THREE.Color();
    
    for (let i = 0; i < count; i++) {
      // Random position in a large cube
      const x = (Math.random() - 0.5) * 2000;
      const y = (Math.random() - 0.5) * 2000;
      const z = (Math.random() - 0.5) * 2000;
      
      positions.push(x, y, z);
      
      // Random colors for stars
      color.setHSL(Math.random(), 0.8, Math.random() * 0.5 + 0.5);
      colors.push(color.r, color.g, color.b);
    }
    
    geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
    geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
    
    const material = new THREE.PointsMaterial({
      size: 2,
      vertexColors: true,
      transparent: true,
      opacity: 0.8,
    });
    
    const stars = new THREE.Points(geometry, material);
    starRef.current = stars;
    
    return () => {
      if (starRef.current) {
        starRef.current.geometry.dispose();
        starRef.current.material.dispose();
      }
    };
  }, [count]);
  
  return <primitive ref={starRef} />;
};

export default StarField;