function NavAvatar({ name = "You", size = 24 }) {
  const initials = name
    .split(/\s+/)
    .map((w) => w[0])
    .slice(0, 2)
    .join("")
    .toUpperCase();

  const dot = Math.max(7, Math.round(size * 0.34));

  return (
    <span className="relative inline-flex shrink-0" style={{ width: size, height: size }}>
      <span
        className="w-full h-full inline-flex items-center justify-center rounded-full bg-overlay text-fg font-mono font-semibold"
        style={{ fontSize: Math.max(9, Math.floor(size * 0.42)) }}
      >
        {initials}
      </span>
      <span
        aria-hidden="true"
        className="absolute right-0 bottom-0 rounded-full bg-accent"
        style={{
          width: dot,
          height: dot,
          boxShadow: "0 0 0 2px var(--color-base), 0 0 6px rgba(245,158,11,0.55)",
        }}
      />
    </span>
  );
}

window.NavAvatar = NavAvatar;