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

const gradientStyle: React.CSSProperties = {
  background: `conic-gradient(
    from 0deg,
    rgba(99, 102, 241, 0.3),
    rgba(139, 92, 246, 0.8),
    rgba(236, 72, 153, 0.6),
    rgba(34, 211, 238, 0.8),
    rgba(99, 102, 241, 0.3)
  )`,
  filter: 'blur(40px)',
};

const glowStyle: React.CSSProperties = {
  background: `conic-gradient(
    from 0deg,
    rgba(99, 102, 241, 0.1),
    rgba(139, 92, 246, 0.4),
    rgba(236, 72, 153, 0.3),
    rgba(34, 211, 238, 0.4),
    rgba(99, 102, 241, 0.1)
  )`,
  filter: 'blur(15px)',
};

export const AnimatedGradientBorder = ({
  children,
  className = '',
}: AnimatedGradientBorderProps) => {
  return (
    <div className={`relative p-10 rounded-xl isolate ${className}`}>
      <div
        className="absolute -inset-16 pointer-events-none"
        style={{
          maskImage: 'radial-gradient(ellipse closest-side at center, black 0%, black 50%, transparent 100%)',
          WebkitMaskImage: 'radial-gradient(ellipse closest-side at center, black 0%, black 50%, transparent 100%)',
        }}
      >
        <div
          className="absolute inset-[-52%] opacity-60 -z-10 animate-[gradient-rotate_4s_linear_infinite]"
          style={glowStyle}
        />
        <div
          className="absolute inset-[-50%] z-0 animate-[gradient-rotate_4s_linear_infinite]"
          style={gradientStyle}
        />
      </div>
      <div className="relative z-10 bg-[#0a0612] rounded-[10px]">{children}</div>
    </div>
  );
};