"use client";

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

const SHAPES = [
  { position: [-2.2, 0.6, 0], color: "#f472b6", geometry: "icosahedron" },
  { position: [0, -0.4, -1], color: "#8b5cf6", geometry: "box" },
  { position: [2.1, 0.9, 0.4], color: "#38bdf8", geometry: "torus" },
  { position: [-1.1, -1.3, 1], color: "#34d399", geometry: "octahedron" },
  { position: [1.4, -1.1, -0.6], color: "#fbbf24", geometry: "dodecahedron" },
] as const;

function Shape({ kind }: { kind: string }) {
  if (kind === "box") return <boxGeometry args={[0.9, 0.9, 0.9]} />;
  if (kind === "torus") return <torusGeometry args={[0.5, 0.2, 24, 64]} />;
  if (kind === "octahedron") return <octahedronGeometry args={[0.62, 0]} />;
  if (kind === "dodecahedron") return <dodecahedronGeometry args={[0.6, 0]} />;
  return <icosahedronGeometry args={[0.65, 0]} />;
}

export function FloatingShapes3D({
  height = 380,
  className,
}: {
  height?: number;
  className?: string;
}) {
  return (
    <div
      className={cn("w-full overflow-hidden rounded-2xl border bg-background", className)}
      style={{ height }}
    >
      <Canvas camera={{ position: [0, 0, 6], fov: 48 }} dpr={[1, 2]}>
        <ambientLight intensity={0.6} />
        <directionalLight position={[4, 5, 4]} intensity={2} />
        <pointLight position={[-5, -2, -4]} intensity={16} color="#8b5cf6" />

        {SHAPES.map((shape, index) => (
          <Float
            key={index}
            speed={1.4 + index * 0.25}
            rotationIntensity={0.9}
            floatIntensity={1.3}
          >
            <mesh position={shape.position as unknown as [number, number, number]}>
              <Shape kind={shape.geometry} />
              <meshStandardMaterial color={shape.color} roughness={0.25} metalness={0.55} />
            </mesh>
          </Float>
        ))}

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

Related components