"use client";

import { Points, PointMaterial } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import { useMemo, useRef } from "react";
import type * as THREE from "three";

export default function Particles() {
  const pointsRef = useRef<THREE.Points>(null);

  const positions = useMemo(() => {
    const count = 420;
    const array = new Float32Array(count * 3);

    for (let index = 0; index < count; index += 1) {
      array[index * 3] = (Math.random() - 0.5) * 34;
      array[index * 3 + 1] = Math.random() * 14 + 1;
      array[index * 3 + 2] = (Math.random() - 0.5) * 28;
    }

    return array;
  }, []);

  useFrame((state, delta) => {
    if (!pointsRef.current) return;

    pointsRef.current.rotation.y += delta * 0.012;
    pointsRef.current.position.y =
      Math.sin(state.clock.elapsedTime * 0.22) * 0.18;
  });

  return (
    <group>
      <Points
        ref={pointsRef}
        positions={positions}
        stride={3}
        frustumCulled={false}
      >
        <PointMaterial
          transparent
          color="#ffffff"
          size={0.075}
          sizeAttenuation
          depthWrite={false}
          opacity={0.58}
        />
      </Points>

      <mesh position={[-5, 6, 1]}>
        <sphereGeometry args={[0.08, 16, 16]} />
        <meshBasicMaterial color="#ffffff" transparent opacity={0.85} />
      </mesh>

      <mesh position={[4, 7, -3]}>
        <sphereGeometry args={[0.06, 16, 16]} />
        <meshBasicMaterial color="#d8f3ff" transparent opacity={0.75} />
      </mesh>

      <mesh position={[7, 4.5, 5]}>
        <sphereGeometry args={[0.07, 16, 16]} />
        <meshBasicMaterial color="#ffffff" transparent opacity={0.8} />
      </mesh>
    </group>
  );
}