"use client";

import * as React from "react";
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import type { Points } from "three";
import { cn } from "@/lib/utils";

function Field({ count = 4000, color = "#a78bfa" }: { count?: number; color?: string }) {
  const ref = React.useRef<Points>(null);
  const { viewport } = useThree();

  const positions = React.useMemo(() => {
    const array = new Float32Array(count * 3);
    for (let i = 0; i < count; i++) {
      array[i * 3] = (Math.random() - 0.5) * 14;
      array[i * 3 + 1] = (Math.random() - 0.5) * 14;
      array[i * 3 + 2] = (Math.random() - 0.5) * 10;
    }
    return array;
  }, [count]);

  useFrame((state, delta) => {
    if (!ref.current) return;
    ref.current.rotation.y += delta * 0.04;
    const x = (state.pointer.x * viewport.width) / 90;
    const y = (state.pointer.y * viewport.height) / 90;
    ref.current.rotation.x += (y - ref.current.rotation.x) * 0.02;
    ref.current.position.x += (x - ref.current.position.x) * 0.03;
  });

  return (
    <points ref={ref}>
      <bufferGeometry>
        <bufferAttribute attach="attributes-position" args={[positions, 3]} />
      </bufferGeometry>
      <pointsMaterial size={0.028} color={color} sizeAttenuation transparent opacity={0.85} />
    </points>
  );
}

export function ParticleField3D({
  count = 4000,
  color = "#a78bfa",
  height = 380,
  children,
  className,
}: {
  count?: number;
  color?: string;
  height?: number;
  children?: React.ReactNode;
  className?: string;
}) {
  return (
    <div
      className={cn("relative w-full overflow-hidden rounded-2xl border bg-black", className)}
      style={{ height }}
    >
      <Canvas camera={{ position: [0, 0, 6], fov: 60 }} dpr={[1, 2]}>
        <Field count={count} color={color} />
      </Canvas>
      {children && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          {children}
        </div>
      )}
    </div>
  );
}

Related components