"use client";

import React from "react";

interface BubbleProps {
  className?: string;
  count?: number;
}

const bubbleConfigs = [
  { size: 80, left: "10%", top: "20%", delay: "0s", duration: "8s", color: "rgba(111, 214, 214, 0.15)" },
  { size: 120, left: "75%", top: "15%", delay: "2s", duration: "10s", color: "rgba(191, 239, 242, 0.2)" },
  { size: 60, left: "85%", top: "60%", delay: "1s", duration: "7s", color: "rgba(240, 90, 90, 0.08)" },
  { size: 100, left: "5%", top: "70%", delay: "3s", duration: "9s", color: "rgba(0, 156, 166, 0.08)" },
  { size: 50, left: "40%", top: "10%", delay: "1.5s", duration: "6s", color: "rgba(111, 214, 214, 0.12)" },
  { size: 70, left: "60%", top: "80%", delay: "4s", duration: "11s", color: "rgba(191, 239, 242, 0.15)" },
  { size: 40, left: "25%", top: "50%", delay: "2.5s", duration: "7.5s", color: "rgba(240, 90, 90, 0.06)" },
  { size: 90, left: "50%", top: "35%", delay: "0.5s", duration: "9.5s", color: "rgba(0, 156, 166, 0.06)" },
];

export function FloatingBubbles({ className = "", count = 8 }: BubbleProps) {
  const bubbles = bubbleConfigs.slice(0, count);

  return (
    <div className={`absolute inset-0 overflow-hidden pointer-events-none ${className}`}>
      {bubbles.map((bubble, i) => (
        <div
          key={i}
          className="absolute rounded-full animate-float-bubble"
          style={{
            width: bubble.size,
            height: bubble.size,
            left: bubble.left,
            top: bubble.top,
            background: `radial-gradient(circle, ${bubble.color} 0%, transparent 70%)`,
            animationDelay: bubble.delay,
            animationDuration: bubble.duration,
          }}
        />
      ))}
    </div>
  );
}

export function FloatingShapes({ className = "" }: { className?: string }) {
  return (
    <div className={`absolute inset-0 overflow-hidden pointer-events-none ${className}`}>
      {/* Teal circle */}
      <div
        className="absolute w-32 h-32 rounded-full animate-float-slow opacity-10"
        style={{
          background: "linear-gradient(135deg, #009CA6, #6FD6D6)",
          top: "15%",
          right: "10%",
          animationDelay: "0s",
        }}
      />
      {/* Coral circle */}
      <div
        className="absolute w-20 h-20 rounded-full animate-float-medium opacity-10"
        style={{
          background: "linear-gradient(135deg, #F05A5A, #F8A5A5)",
          bottom: "25%",
          left: "8%",
          animationDelay: "1s",
        }}
      />
      {/* Baby blue blob */}
      <div
        className="absolute w-40 h-40 rounded-full animate-pulse-soft"
        style={{
          background: "radial-gradient(circle, rgba(191,239,242,0.3) 0%, transparent 70%)",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
        }}
      />
      {/* Small teal dot */}
      <div
        className="absolute w-6 h-6 rounded-full animate-float-medium"
        style={{
          background: "#6FD6D6",
          opacity: 0.2,
          top: "70%",
          right: "20%",
          animationDelay: "2s",
        }}
      />
      {/* Small coral dot */}
      <div
        className="absolute w-4 h-4 rounded-full animate-float-slow"
        style={{
          background: "#F05A5A",
          opacity: 0.15,
          top: "30%",
          left: "25%",
          animationDelay: "3s",
        }}
      />
    </div>
  );
}