/* global React */
/**
 * BorderBeam — a 1px sweeping gradient that orbits the parent rectangle.
 * Approximates the production `motion.div` + `offsetPath` rect orbit with
 * a rotating conic gradient: cheaper, equally legible at the small sizes
 * the 927 HUD cards use.
 *
 * Place inside a `position: relative` parent. The beam will fill the
 * parent's border-box via inset:0.
 */
function BorderBeam({
  duration = 4,
  colorFrom = "#c8ccd2",
  colorTo = "#c8302f",
  borderWidth = 1,
  reverse = false,
  radius = 0,
}) {
  return (
    <div
      aria-hidden="true"
      className="bb-host"
      style={{
        position: "absolute",
        inset: 0,
        pointerEvents: "none",
        borderRadius: radius,
        padding: borderWidth,
        background: `conic-gradient(from 0deg,
          transparent 0%,
          transparent 70%,
          ${colorFrom} 82%,
          ${colorTo} 92%,
          transparent 100%)`,
        animation: `bb-rotate ${duration}s linear infinite ${reverse ? "reverse" : "normal"}`,
        WebkitMask:
          "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
        WebkitMaskComposite: "xor",
        maskComposite: "exclude",
      }}
    >
      <style>{`
        @keyframes bb-rotate { to { transform: rotate(360deg); } }
        .bb-host { transform: rotate(0deg); will-change: transform; }
      `}</style>
    </div>
  );
}

Object.assign(window, { BorderBeam });