import React from "react";

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

ensureStyleA("at-avatar", `
  .at-av{display:inline-grid;place-items:center;flex-shrink:0;border-radius:50%;
    font-family:var(--font-sans);font-weight:600;letter-spacing:.02em;
    background:var(--at-plum-300);color:var(--at-plum-900)}
  .at-av--sm{width:22px;height:22px;font-size:10px}
  .at-av--md{width:32px;height:32px;font-size:12px;border-radius:8px}
  .at-av--lg{width:56px;height:56px;font-size:18px;border-radius:14px}
  .at-av--employee{background:var(--at-plum-200);color:var(--at-plum-900)}
  .at-av--contractor{background:var(--at-flush-100);color:var(--at-flush-700)}
`);

function initials(name) {
  return (name || "?").split(/\s+/).slice(0, 2).map((s) => s[0]).join("").toUpperCase();
}

/**
 * Monogram avatar. Square-ish for md/lg, round for sm. Tinted by person kind.
 */
export function Avatar({ name, kind = "employee", size = "sm" }) {
  return (
    <span className={`at-av at-av--${size} at-av--${kind}`} title={name}>
      {initials(name)}
    </span>
  );
}