"use client";

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

function ParticleRing() {
  const pointsRef = useRef<THREE.Points>(null);
  const particleCount = 500;

  const positions = useMemo(() => {
    const pos = new Float32Array(particleCount * 3);
    const radius = 2.5;
    for (let i = 0; i < particleCount; i++) {
      const theta = Math.random() * Math.PI * 2;
      const r = radius + (Math.random() - 0.5) * 0.5;
      pos[i * 3] = Math.cos(theta) * r;
      pos[i * 3 + 1] = (Math.random() - 0.5) * 0.5;
      pos[i * 3 + 2] = Math.sin(theta) * r;
    }
    return pos;
  }, []);

  useFrame((_, delta) => {
    if (pointsRef.current) {
      pointsRef.current.rotation.y += delta * 0.15;
      pointsRef.current.rotation.x += delta * 0.05;
    }
  });

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

export default function Gate() {
  return (
    <div style={{ width: '100%', height: '100%', minHeight: '100vh', background: 'transparent' }}>
      <Canvas 
        camera={{ position: [0, 0, 7], fov: 60 }} 
        gl={{ alpha: true, antialias: true }}
      >
        <ParticleRing />
      </Canvas>
    </div>
  );
}