Glow Border

import * as React from "react";
import { cn } from "@/lib/utils";

export interface GlowBorderProps extends React.ComponentProps<"div"> {
  /** Glow intensity, 0–1. Scales stroke opacity and bloom spread. */
  strength?: number;
  /** Border ring thickness in px. */
  borderWidth?: number;
  /** Corner radius of the ring in px. Match the parent's radius. */
  borderRadius?: number;
  /** Gradient angle in degrees (multi-color rings only). */
  angle?: number;
  /** Gradient stops painted along the ring. A single color also works. */
  colors?: string[];
}

/** Confines a painted layer to the border ring: a full-bleed mask minus a
 *  content-box mask leaves only the padding — the ring itself. */
const ringMask: React.CSSProperties = {
  mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
  WebkitMaskComposite: "xor",
  maskComposite: "exclude",
};

/**
 * A static glowing border ring. Pure surface treatment — no animation.
 *
 * Anatomy: a crisp gradient stroke confined to a ring via the double-mask
 * idiom (padding + content-box/exclude composite), over a bloom layer — the
 * same masked ring re-rasterized through a parent blur. Because the blur is
 * isolated on its own element ABOVE the mask, the halo bleeds softly past
 * the border in both directions instead of being clipped by the ring, and it
 * never touches the crisp stroke. Absolutely positioned — parent needs
 * position: relative.
 */
export function GlowBorder({
  strength = 1,
  borderWidth = 1,
  borderRadius = 12,
  angle = 130,
  colors = ["#38bdf8", "#4D80E6", "#a855f7"],
  className,
  style,
  ...props
}: GlowBorderProps) {
  const level = Math.min(Math.max(strength, 0), 1);
  const paint =
    colors.length > 1
      ? `linear-gradient(${angle}deg, ${colors.join(", ")})`
      : (colors[0] ?? "#4D80E6");

  return (
    <div
      aria-hidden
      className={cn("pointer-events-none absolute inset-0", className)}
      style={{ borderRadius, ...style }}
      {...props}
    >
      {/* Bloom — blur isolated on this wrapper, so the masked ring below
          spreads as a real halo (inward and outward) without softening the
          stroke drawn on top of it. */}
      <div
        className="absolute inset-0"
        style={{
          filter: `blur(${4 + 4 * level}px)`,
          opacity: 0.5 * level,
        }}
      >
        <div
          className="absolute inset-0"
          style={{
            borderRadius,
            padding: borderWidth + 1,
            background: paint,
            ...ringMask,
          }}
        />
      </div>
      {/* Crisp stroke, exactly borderWidth thick. */}
      <div
        className="absolute inset-0"
        style={{
          borderRadius,
          padding: borderWidth,
          background: paint,
          opacity: 0.9 * level,
          ...ringMask,
        }}
      />
    </div>
  );
}