import React from "react";

function ensureStyleC(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);
}

ensureStyleC("at-chip", `
  .at-chip{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:var(--radius-pill);
    font-family:var(--font-sans);font-size:11px;font-weight:600;line-height:18px;
    background:var(--at-plum-200);color:var(--fg-2)}
  .at-chip__dot{width:6px;height:6px;border-radius:50%}
  .at-chip--employee{background:var(--at-plum-200);color:var(--at-plum-900)}
  .at-chip--contractor{background:var(--at-flush-100);color:var(--at-flush-700)}
  .at-chip--active{background:var(--at-success-bg);color:var(--at-success-fg)}
  .at-chip--planned{background:var(--at-warning-bg);color:var(--at-warning-fg)}
  .at-chip--ended{background:var(--at-plum-200);color:var(--fg-4)}
  .at-chip--fn{background:var(--at-plum-100);color:var(--at-plum-900);border:1px solid var(--border-subtle)}
`);

const DOT = { employee: "var(--kind-employee)", contractor: "var(--kind-contractor)" };

/**
 * Compact pill for encoding a person's kind, an assignment status, or a function tag.
 */
export function Chip({ tone = "neutral", dot = false, children }) {
  const toneCls = ["employee", "contractor", "active", "planned", "ended", "fn"].includes(tone) ? `at-chip--${tone}` : "";
  return (
    <span className={`at-chip ${toneCls}`}>
      {dot && <span className="at-chip__dot" style={{ background: DOT[tone] || "var(--at-plum-600)" }} />}
      {children}
    </span>
  );
}