Aurora Border

"use client";

import { motion } from "framer-motion";

interface AuroraBorderProps {
  children?: React.ReactNode;
  /** Border radius in px. Default: 16 */
  radius?: number;
  /** Border thickness in px. Default: 2 */
  thickness?: number;
  /** One full rotation duration in seconds. Default: 6 */
  speed?: number;
  /** Three gradient stops. Default: ['#7c3aed', '#ec4899', '#f59e0b'] */
  colors?: [string, string, string];
  /** Outer glow blur radius in px. Default: 24 */
  glow?: number;
  className?: string;
}

export default function AuroraBorder({
  children,
  radius = 16,
  thickness = 2,
  speed = 6,
  colors = ["#7c3aed", "#ec4899", "#f59e0b"],
  glow = 24,
  className = "",
}: AuroraBorderProps) {
  const [c1, c2, c3] = colors;
  const gradient = `conic-gradient(from 0deg, ${c1}, ${c2}, ${c3}, ${c1})`;
  const rotation = {
    animate: { rotate: 360 },
    transition: { duration: speed, repeat: Infinity, ease: "linear" as const },
  };

  return (
    <div
      className={`relative overflow-hidden ${className}`}
      style={{
        borderRadius: radius,
        padding: thickness,
      }}
    >
      {/* Core border layer */}
      <motion.div
        animate={rotation.animate}
        transition={rotation.transition}
        style={{
          position: "absolute",
          inset: "-50%",
          width: "200%",
          height: "200%",
          background: gradient,
          borderRadius: radius,
        }}
      />

      {/* Glow layer */}
      <motion.div
        animate={rotation.animate}
        transition={rotation.transition}
        style={{
          position: "absolute",
          inset: "-50%",
          width: "200%",
          height: "200%",
          background: gradient,
          filter: `blur(${glow}px)`,
          opacity: 0.6,
          borderRadius: radius,
        }}
      />

      {/* Inner content panel */}
      <div
        style={{
          borderRadius: Math.max(0, radius - thickness),
          position: "relative",
          zIndex: 1,
        }}
        className="overflow-hidden bg-[#0a0a0f]"
      >
        {children}
      </div>
    </div>
  );
}