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-allocchip", `
  .at-allocchip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--border-subtle);
    border-radius:var(--radius-pill);background:var(--bg-page);font-family:var(--font-sans);font-size:11px;color:var(--fg-2)}
  .at-allocchip__sw{width:8px;height:8px;border-radius:2px;flex:0 0 8px}
  .at-allocchip__pct{color:var(--fg-1);font-weight:600;font-variant-numeric:tabular-nums}
`);

/**
 * Category legend pill: a colour swatch, the work-group label, and its share.
 * Used in AllocationStrip and anywhere a per-dimension breakdown is shown.
 */
export function AllocationChip({ color, label, pct }) {
  return (
    <span className="at-allocchip">
      <span className="at-allocchip__sw" style={{ background: color }} />
      {label}
      {pct != null && <span className="at-allocchip__pct">{pct}</span>}
    </span>
  );
}