"use client";

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

function Satellites({ count, color }: { count: number; color: string }) {
  const group = React.useRef<Group>(null);

  useFrame((_, delta) => {
    if (group.current) group.current.rotation.y += delta * 0.5;
  });

  return (
    <group ref={group} rotation={[0.35, 0, 0.1]}>
      {Array.from({ length: count }, (_, index) => {
        const angle = (index / count) * Math.PI * 2;
        return (
          <mesh key={index} position={[Math.cos(angle) * 2.3, 0, Math.sin(angle) * 2.3]}>
            <sphereGeometry args={[0.07, 14, 14]} />
            <meshStandardMaterial color={color} emissive={color} emissiveIntensity={2} />
          </mesh>
        );
      })}
    </group>
  );
}

export function OrbitText3D({
  text = "SHIP",
  color = "#8b5cf6",
  satellites = 14,
  height = 340,
  className,
}: {
  text?: string;
  color?: string;
  satellites?: number;
  height?: number;
  className?: string;
}) {
  return (
    <div
      className={cn("w-full overflow-hidden rounded-2xl border bg-black", className)}
      style={{ height }}
    >
      <Canvas camera={{ position: [0, 0.4, 5], fov: 45 }} dpr={[1, 2]}>
        <ambientLight intensity={0.6} />
        <directionalLight position={[3, 4, 3]} intensity={2.2} />
        <pointLight position={[-4, -1, -2]} intensity={16} color={color} />

        <Text
          fontSize={1.05}
          letterSpacing={0.02}
          anchorX="center"
          anchorY="middle"
          outlineWidth={0.012}
          outlineColor="#ffffff"
        >
          {text}
          <meshStandardMaterial color="#f8fafc" roughness={0.25} metalness={0.65} />
        </Text>

        <Satellites count={satellites} color={color} />
        <OrbitControls enableZoom={false} enablePan={false} />
      </Canvas>
    </div>
  );
}

Related components