"use client";

import React from "react";
import { motion } from "framer-motion";

export const Blob = ({
  color,
  size,
  top,
  left,
  delay,
}: {
  color: string;
  size: number;
  top: string;
  left: string;
  delay: number;
}) => (
  <motion.div
    initial={{ scale: 0.8, opacity: 0.3, x: 0, y: 0 }}
    animate={{
      scale: [0.8, 1.2, 0.8],
      opacity: [0.3, 0.5, 0.3],
      x: [0, 30, 0],
      y: [0, -30, 0],
    }}
    transition={{
      duration: 8,
      repeat: Infinity,
      ease: "easeInOut",
      delay,
    }}
    style={{
      position: "absolute",
      top,
      left,
      width: size,
      height: size,
      borderRadius: "50%",
      background: color,
      filter: "blur(60px)",
      zIndex: 0,
      pointerEvents: "none",
    }}
  />
);