Aurora Background

"use client";

import { motion } from "framer-motion";

interface AuroraBackgroundProps {
  children?: React.ReactNode;
  className?: string;
}

export default function AuroraBackground({
  children,
  className = "",
}: AuroraBackgroundProps) {
  return (
    <div
      className={`relative overflow-hidden bg-black ${className}`}
    >
      <div className="absolute inset-0">
        <motion.div
          animate={{
            backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
          }}
          transition={{
            duration: 10,
            repeat: Infinity,
            ease: "linear",
          }}
          className="absolute -inset-[100%] opacity-50"
          style={{
            background:
              "radial-gradient(ellipse 80% 50% at 50% 50%, rgba(99,102,241,0.3), transparent), radial-gradient(ellipse 60% 40% at 30% 60%, rgba(139,92,246,0.3), transparent), radial-gradient(ellipse 70% 50% at 70% 40%, rgba(236,72,153,0.2), transparent)",
            backgroundSize: "200% 200%",
          }}
        />
        <div className="absolute inset-0 bg-black/40" />
      </div>
      <div className="relative z-10">{children}</div>
    </div>
  );
}