/*
 * Sandbox is hatched as well as coloured, so it survives a colourblind reader
 * and a glance. It sits in the same place on every screen: issuing against the
 * wrong environment should feel wrong before you click.
 */
const ENV = process.env.NEXT_PUBLIC_ADMIN_ENV === "sandbox" ? "sandbox" : "production";

export function EnvBadge() {
    const sandbox = ENV === "sandbox";
    return (
        <span
            className={
                sandbox
                    ? "inline-flex items-center gap-2 rounded-sm border border-warn px-2 py-1 font-mono text-[0.72rem] uppercase tracking-[0.1em] text-ink [background-image:repeating-linear-gradient(-45deg,var(--accent-wash)_0_6px,transparent_6px_12px)]"
                    : "inline-flex items-center gap-2 rounded-sm bg-accent px-2 py-1 font-mono text-[0.72rem] uppercase tracking-[0.1em] text-accent-ink"
            }
        >
            <i className="h-1.5 w-1.5 shrink-0 rounded-full bg-current" />
            {sandbox ? "Sandbox" : "Production"}
        </span>
    );
}