"use client";
import { motion } from "framer-motion";

export function AuroraBackground() {
  return (
    <div className="flex items-center justify-center w-full h-80 bg-[#000] rounded-xl border border-border relative overflow-hidden">
      <div className="absolute inset-0 z-10 bg-black/50" />
      <motion.div 
        className="absolute -inset-[100%] opacity-70"
        style={{
          background: "linear-gradient(to right, #00ff87, #60efff, #0061ff)",
          filter: "blur(60px)",
        }}
        animate={{
          transform: [
            "translate(0%, 0%) rotate(0deg)",
            "translate(-10%, -10%) rotate(90deg)",
            "translate(10%, 10%) rotate(180deg)",
            "translate(0%, 0%) rotate(360deg)"
          ],
        }}
        transition={{
          duration: 20,
          repeat: Infinity,
          ease: "linear"
        }}
      />
      <h3 className="relative z-20 text-3xl font-bold text-white tracking-tighter">Aurora effect</h3>
    </div>
  );
}