"use client";
import { motion } from "framer-motion";
import { useFloatingAnimation } from "@/hooks/motion/useFloatingAnimation";
import { useMotionContext } from "./MotionProvider";

interface FloatingLayerProps {
  className?: string;
}

function FloatingOrb({
  size,
  top,
  left,
  color,
  amplitude,
  speed,
  phase,
  blur,
}: {
  size: number; top: string; left: string; color: string;
  amplitude: number; speed: number; phase: number; blur: number;
}) {
  const { x, y } = useFloatingAnimation(amplitude, speed, phase);
  return (
    <motion.div
      style={{
        position: "absolute",
        width: size, height: size,
        top, left,
        borderRadius: "50%",
        background: color,
        filter: `blur(${blur}px)`,
        opacity: 0.35,
        x, y,
        pointerEvents: "none",
        willChange: "transform",
      }}
    />
  );
}

export function FloatingLayer({ className }: FloatingLayerProps) {
  const { reducedMotion } = useMotionContext();
  if (reducedMotion) return null;

  return (
    <div
      className={className}
      style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none", zIndex: 0 }}
    >
      <FloatingOrb size={300} top="-10%"  left="-5%"  color="radial-gradient(circle, var(--accent), transparent)" amplitude={12} speed={0.5} phase={0}    blur={60} />
      <FloatingOrb size={200} top="20%"   left="70%"  color="radial-gradient(circle, var(--accent), transparent)" amplitude={8}  speed={0.7} phase={2.1}  blur={50} />
      <FloatingOrb size={150} top="60%"   left="20%"  color="radial-gradient(circle, var(--accent), transparent)" amplitude={10} speed={0.4} phase={4.2}  blur={45} />
    </div>
  );
}