interface AvatarProps {
  name: string;
  /** Per-agent accent hex; defaults to the brand coral. */
  accent?: string;
  size?: "sm" | "md" | "lg" | "rail" | "chat" | "welcome";
  /** Circle (people) or 17px-radius squircle (claws, measured). */
  shape?: "circle" | "squircle";
  /** Green presence dot overlay (rail + chat headers). */
  online?: boolean;
}

const SIZES = {
  sm: "size-6 text-xxs",
  md: "size-8 text-xs",
  lg: "size-16 text-xl",
  rail: "size-12 text-base" /* 48px claw rail tile */,
  chat: "size-[50px] text-base" /* assistant message avatar */,
  welcome: "size-[126px] text-4xl" /* empty-state hero */,
};

/** Initials avatar used until generated art assets land (excluded by spec). */
export function Avatar({
  name,
  accent,
  size = "md",
  shape = "circle",
  online = false,
}: AvatarProps) {
  const initials = name
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((part) => part[0]!.toUpperCase())
    .join("");
  const radius =
    shape === "squircle" ? "rounded-[17px]" : "rounded-full";
  return (
    <span className="relative inline-flex">
      <span
        aria-hidden
        className={`inline-flex items-center justify-center font-medium text-background ${radius} ${SIZES[size]}`}
        style={{ backgroundColor: accent || "var(--color-accent)" }}
      >
        {initials}
      </span>
      {online && (
        <span
          data-online-dot
          aria-hidden
          className="absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full border-2 border-background bg-green-500"
        />
      )}
    </span>
  );
}