/* global React, window */
// EnvBadge - shows a small "BETA" chip in the topbar so you never
// confuse environments. Renders nothing on production.

function EnvBadge() {
  const cfg = window.PAMP_CONFIG;
  if (!cfg?.IS_BETA) return null;

  return (
    <span
      title="You are on the beta environment"
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 6,
        padding: "4px 10px",
        borderRadius: 999,
        background: "color-mix(in oklch, var(--warn) 18%, transparent)",
        color: "var(--warn)",
        fontFamily: "var(--font-mono)",
        fontSize: 10.5,
        fontWeight: 600,
        letterSpacing: "0.12em",
        textTransform: "uppercase",
        border: "1px solid color-mix(in oklch, var(--warn) 35%, transparent)",
        whiteSpace: "nowrap",
      }}
    >
      <span
        style={{
          width: 6,
          height: 6,
          borderRadius: "50%",
          background: "var(--warn)",
        }}
      />
      Beta
    </span>
  );
}

window.EnvBadge = EnvBadge;