"use client";

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

function Wave({ color = "#38bdf8", amplitude = 0.45 }: { color?: string; amplitude?: number }) {
  const ref = React.useRef<Mesh>(null);
  const base = React.useRef<Float32Array | null>(null);

  useFrame((state) => {
    const mesh = ref.current;
    if (!mesh) return;

    const geometry = mesh.geometry as PlaneGeometry;
    const position = geometry.attributes.position;

    if (!base.current) base.current = Float32Array.from(position.array as Float32Array);

    const time = state.clock.elapsedTime;

    for (let i = 0; i < position.count; i++) {
      const x = base.current[i * 3];
      const y = base.current[i * 3 + 1];
      const distance = Math.sqrt(x * x + y * y);
      position.setZ(i, Math.sin(distance * 1.6 - time * 1.4) * amplitude);
    }

    position.needsUpdate = true;
    geometry.computeVertexNormals();
  });

  return (
    <mesh ref={ref} rotation={[-Math.PI / 2.6, 0, 0]}>
      <planeGeometry args={[12, 12, 64, 64]} />
      <meshStandardMaterial color={color} wireframe transparent opacity={0.55} />
    </mesh>
  );
}

export function WavePlane3D({
  color = "#38bdf8",
  amplitude = 0.45,
  height = 340,
  className,
}: {
  color?: string;
  amplitude?: 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, 3.2, 6], fov: 50 }} dpr={[1, 2]}>
        <ambientLight intensity={0.8} />
        <directionalLight position={[2, 6, 3]} intensity={1.4} />
        <Wave color={color} amplitude={amplitude} />
      </Canvas>
    </div>
  );
}
Related components
