import React from "react";

function ensureStyle(id, css) {
  if (typeof document === "undefined") return;
  if (document.getElementById(id)) return;
  const el = document.createElement("style");
  el.id = id; el.textContent = css;
  document.head.appendChild(el);
}

ensureStyle("at-code", `
  .at-code{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:12px;
    color:var(--fg-2);background:var(--at-plum-100);padding:1px 6px;border-radius:var(--radius-xs);
    letter-spacing:0.01em;white-space:nowrap}
`);

/**
 * Monospace reference-code token — cost centres, system ids, account refs
 * (e.g. CC-TR-002, NS-2078). A quiet pill that reads as a literal value.
 */
export function CodeValue({ children }) {
  return <code className="at-code">{children}</code>;
}