"use client";

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

function Blob({ color, speed }: { color: string; speed: number }) {
  const ref = React.useRef<Mesh>(null);

  useFrame((state) => {
    if (!ref.current) return;
    const t = state.clock.elapsedTime;
    ref.current.rotation.y = t * 0.18;
    const scale = 1 + Math.sin(t * 0.9) * 0.05;
    ref.current.scale.setScalar(scale);
  });

  return (
    <mesh ref={ref}>
      <sphereGeometry args={[1.35, 96, 96]} />
      <MeshDistortMaterial
        color={color}
        distort={0.42}
        speed={speed}
        roughness={0.1}
        metalness={0.6}
      />
    </mesh>
  );
}

export function MorphingBlob3D({
  color = "#8b5cf6",
  speed = 1.6,
  height = 360,
  className,
}: {
  color?: string;
  speed?: 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] }} dpr={[1, 2]}>
        <ambientLight intensity={0.35} />
        <directionalLight position={[3, 3, 3]} intensity={2.2} />
        <pointLight position={[-4, -2, -2]} intensity={20} color="#38bdf8" />
        <pointLight position={[3, -3, 2]} intensity={14} color="#f472b6" />
        <Blob color={color} speed={speed} />
      </Canvas>
    </div>
  );
}

Related components