import clsx from "clsx";

function Avatar({ name, size = 32, online, self }) {
  const initials = (name || "?")
    .split(/\s+/)
    .map((w) => w[0])
    .slice(0, 2)
    .join("")
    .toUpperCase();

  const dotSize = Math.max(11, size * 0.34);

  return (
    <div className="relative shrink-0" style={{ width: size, height: size }}>
      <div
        className={clsx(
          "inline-flex items-center justify-center rounded-full font-mono font-semibold tracking-[-0.02em]",
          self ? "bg-accent text-accent-fg" : "bg-overlay text-fg"
        )}
        style={{ width: size, height: size, fontSize: Math.max(10, Math.floor(size * 0.38)) }}
      >
        {initials}
      </div>
      {online !== undefined && (
        <span
          className={clsx(
            "absolute right-0 bottom-0 rounded-full border-2 border-(--color-base)",
            online ? "bg-accent" : "bg-fg-tertiary"
          )}
          style={{ width: dotSize, height: dotSize }}
        />
      )}
    </div>
  );
}

window.Avatar = Avatar;