import { jsx } from 'react/jsx-runtime';
import { Canvas } from '@react-three/fiber';
import { useReducedMotion } from 'motion/react';
import { cn } from '../../../utils/cn.js';
import 'react';
import { ParticlesScene } from './Particles.scene.js';

/**
 * Particles creates a floating particle background effect using Three.js.
 *
 * Particles drift upward with slight horizontal variation and react to mouse
 * proximity. Optional connection lines are drawn between nearby particles.
 *
 * The component renders as an absolutely-positioned layer, ideal for use as
 * a section or page background.
 *
 * @example
 * ```tsx
 * <div className="relative h-screen overflow-hidden bg-gray-950">
 *   <Particles count={100} color="#6366f1" connectionDistance={120} />
 *   <div className="relative z-10 p-8">
 *     <h1 className="text-white text-4xl">Content on top</h1>
 *   </div>
 * </div>
 * ```
 */
const Particles = ({ count = 80, color = "#6366f1", size = 2, speed = 1, connectionDistance = 150, connectionColor, mouseRadius = 200, mouseForce = 0.5, opacity = 0.6, className, style, ...rest }) => {
    var _a;
    const shouldReduceMotion = (_a = useReducedMotion()) !== null && _a !== void 0 ? _a : false;
    return (jsx("div", { className: cn("absolute inset-0 pointer-events-none", className), style: style, ...rest, children: jsx(Canvas, { className: "!pointer-events-auto", dpr: [1, 2], orthographic: true, camera: { zoom: 50, near: 0.1, far: 100, position: [0, 0, 10] }, gl: { antialias: false, alpha: true }, style: { position: "absolute", inset: 0, width: "100%", height: "100%" }, children: jsx(ParticlesScene, { count: count, color: color, size: size, speed: speed, connectionDistance: connectionDistance, connectionColor: connectionColor || color, mouseRadius: mouseRadius, mouseForce: mouseForce, opacity: opacity, reducedMotion: shouldReduceMotion }) }) }));
};

export { Particles };
