"use client";
 
import React from "react";
 
interface Props {
  children?: React.ReactNode;
  blobColors?: string[];
  darkBlobColors?: string[];
}
 
/**
 * A component that renders animated blobs in the background.
 *
 * @param {React.ReactNode} props.children - The content to be rendered on top of the blobs
 * @param {string[]} props.blobColors - Array of the colors of the blobs in tailwind bg classes.
 * @param {string[]} props.darkBlobColors - Array of the colors of the blobs in tailwind dark:bg classes.
 */
export function AnimatedBlobs({
  children,
  blobColors = ["bg-purple-300", "bg-yellow-300", "bg-pink-300"],
  darkBlobColors = [
    "dark:bg-purple-700",
    "dark:bg-yellow-600",
    "dark:bg-pink-700",
  ],
}: Props) {
  return (
    <div>
      <div className="relative w-full max-w-lg">
        <div
          className={`absolute top-0 -left-4 w-4/5 h-4/5 ${blobColors[0]} ${darkBlobColors[0]} rounded-full mix-blend-multiply dark:mix-blend-screen filter blur-xl opacity-70 animate-blob`}
        ></div>
        <div
          className={`absolute top-0 -right-4 w-4/5 h-4/5 ${blobColors[1]} ${darkBlobColors[1]} rounded-full mix-blend-multiply dark:mix-blend-screen filter blur-xl opacity-70 animate-blob`}
          style={{ animationDelay: "2s" }}
        ></div>
        <div
          className={`absolute -bottom-8 left-20 w-4/5 h-4/5 ${blobColors[2]} ${darkBlobColors[2]} rounded-full mix-blend-multiply dark:mix-blend-screen filter blur-xl opacity-70 animate-blob`}
          style={{ animationDelay: "1s" }}
        ></div>
 
        {children}
      </div>
    </div>
  );
}