"use client";

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

function Satellite({ radius, speed, color, tilt }: { radius: number; speed: number; color: string; tilt: number }) {
  const group = React.useRef<Group>(null);

  useFrame((state) => {
    if (group.current) group.current.rotation.y = state.clock.elapsedTime * speed;
  });

  return (
    <group rotation={[tilt, 0, 0]}>
      <mesh rotation={[Math.PI / 2, 0, 0]}>
        <torusGeometry args={[radius, 0.008, 8, 128]} />
        <meshBasicMaterial color={color} transparent opacity={0.35} />
      </mesh>
      <group ref={group}>
        <mesh position={[radius, 0, 0]}>
          <sphereGeometry args={[0.09, 16, 16]} />
          <meshStandardMaterial color={color} emissive={color} emissiveIntensity={1.6} />
        </mesh>
      </group>
    </group>
  );
}

export function OrbitRings3D({
  height = 380,
  className,
}: {
  height?: number;
  className?: string;
}) {
  return (
    <div
      className={cn("w-full overflow-hidden rounded-2xl border bg-black", className)}
      style={{ height }}
    >
      <Canvas camera={{ position: [0, 1.6, 5.4], fov: 45 }} dpr={[1, 2]}>
        <ambientLight intensity={0.5} />
        <pointLight position={[0, 0, 0]} intensity={12} color="#8b5cf6" />

        <mesh>
          <sphereGeometry args={[0.6, 48, 48]} />
          <meshStandardMaterial color="#8b5cf6" roughness={0.2} metalness={0.8} />
        </mesh>

        <Satellite radius={1.4} speed={0.8} color="#38bdf8" tilt={0.2} />
        <Satellite radius={2.0} speed={-0.55} color="#f472b6" tilt={-0.35} />
        <Satellite radius={2.6} speed={0.34} color="#34d399" tilt={0.5} />

        <OrbitControls enableZoom={false} enablePan={false} autoRotate autoRotateSpeed={0.3} />
      </Canvas>
    </div>
  );
}

Related components