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-[#050510] ${className}`}
    >
      <div className="absolute inset-0">
        {/* Primary — teal/cyan sweep */}
        <motion.div
          animate={{
            x: ["-20%", "20%", "-20%"],
            y: ["-10%", "15%", "-10%"],
            scale: [1, 1.2, 1],
          }}
          transition={{
            duration: 8,
            repeat: Infinity,
            ease: "easeInOut",
          }}
          className="absolute -inset-[50%] opacity-60"
          style={{
            background:
              "radial-gradient(ellipse 50% 40% at 50% 50%, rgba(6,182,212,0.45), transparent)",
          }}
        />
        {/* Secondary — violet, offset */}
        <motion.div
          animate={{
            x: ["30%", "-20%", "30%"],
            y: ["10%", "-20%", "10%"],
            scale: [1.1, 0.9, 1.1],
          }}
          transition={{
            duration: 10,
            repeat: Infinity,
            ease: "easeInOut",
          }}
          className="absolute -inset-[50%] opacity-55"
          style={{
            background:
              "radial-gradient(ellipse 45% 35% at 50% 50%, rgba(124,58,237,0.5), transparent)",
          }}
        />
        {/* Tertiary — rose/pink accent */}
        <motion.div
          animate={{
            x: ["-10%", "30%", "-10%"],
            y: ["20%", "-10%", "20%"],
            rotate: [0, 15, 0],
          }}
          transition={{
            duration: 7,
            repeat: Infinity,
            ease: "easeInOut",
          }}
          className="absolute -inset-[50%] opacity-40"
          style={{
            background:
              "radial-gradient(ellipse 40% 30% at 50% 50%, rgba(244,63,94,0.45), transparent)",
          }}
        />
        {/* Bright emerald highlight */}
        <motion.div
          animate={{
            x: ["10%", "-15%", "10%"],
            y: ["-5%", "10%", "-5%"],
          }}
          transition={{
            duration: 6,
            repeat: Infinity,
            ease: "easeInOut",
          }}
          className="absolute -inset-[30%] opacity-25"
          style={{
            background:
              "radial-gradient(ellipse 25% 20% at 50% 50%, rgba(52,211,153,0.5), transparent)",
          }}
        />
        <div className="absolute inset-0 bg-[#050510]/20" />
      </div>
      <div className="relative z-10">{children}</div>
    </div>
  );
}