/* ==========================================================================
   Beacon.tsx
   --------------------------------------------------------------------------
   Replaces the `react-status-beacon` dependency.

   The source rendered <Beacon status="positive" colors={{ positive: "#f5a66c" }} />.
   The colour is now a single `color` prop and the pulse is pure CSS, so it
   honours prefers-reduced-motion. See .sb__beacon in status-banner.css.
   ========================================================================== */

(function (SB: any) {
  "use strict";

  interface BeaconProps {
    color?: string;
  }

  function Beacon(props: BeaconProps) {
    const color = props.color;
    const style = color ? { background: color } : undefined;

    return (
      <span className="sb__beacon" aria-hidden="true">
        <span className="sb__beacon__ring" style={style} />
        <span className="sb__beacon__dot" style={style} />
      </span>
    );
  }

  SB.Beacon = Beacon;
})((window as any).SB = (window as any).SB || {});