/* Small shared components */

const Avatar = ({ id, size }) => {
  const s = STAFF_BY_ID[id];
  if (!s) return null;
  const cls = size === "lg" ? "cdc-avatar cdc-avatar--lg"
            : size === "sm" ? "cdc-avatar cdc-avatar--sm"
            : "cdc-avatar";
  return (
    <span className={cls} style={{ background: s.color }} title={s.name}>
      {s.initials}
    </span>
  );
};

const PersonChip = ({ id, size = "sm" }) => {
  const s = STAFF_BY_ID[id];
  if (!s) return null;
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}>
      <Avatar id={id} size={size} />
      <span>{s.name.split(" ").slice(0, 2).join(" ")}</span>
    </span>
  );
};

const AreaIcon = ({ id, size = 16 }) => {
  const a = AREA_BY_ID[id];
  if (!a) return null;
  const Cmp = I[a.icon] || I.Home;
  return <Cmp size={size} />;
};

const AreaChip = ({ id }) => {
  const a = AREA_BY_ID[id];
  if (!a) return null;
  return (
    <span className="cdc-meta">
      <AreaIcon id={id} size={14} />
      <span>{a.label}</span>
    </span>
  );
};

const StatusBadge = ({ status }) => {
  const m = STATUS_META[status];
  if (!m) return null;
  return <span className={`cdc-badge ${m.badge}`}>{m.label}</span>;
};

const Priority = ({ p }) => {
  const m = PRIORITY_META[p];
  if (!m) return null;
  return (
    <span className={`cdc-prio ${m.cls}`}>
      <span className="cdc-prio__dot" />
      <span>{m.label}</span>
    </span>
  );
};

const Circle = ({ checked, onClick }) => (
  <span
    className="cdc-check"
    data-checked={checked || undefined}
    onClick={(e) => { e.stopPropagation(); onClick && onClick(); }}
    role="checkbox"
    aria-checked={checked}
  >
    {checked ? <I.Check size={12} stroke={2.4} /> : null}
  </span>
);

Object.assign(window, { Avatar, PersonChip, AreaIcon, AreaChip, StatusBadge, Priority, Circle });