/* hub-ui.jsx — component thị giác dùng chung cho Hub (Avatar, LogoMark) */
(function () {
  function Avatar({ name, size = 34, radius, ring, online, url }) {
    return (
      <div className={"av " + (ring ? "av-ring" : "")} data-online={online ? "1" : undefined}
        style={{ width: size, height: size, fontSize: size * 0.38,
          borderRadius: radius || Math.round(size * 0.27), background: url ? "#fff" : avatarBg(name),
          overflow: url ? "hidden" : undefined }}>
        {url ? <img src={url} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} /> : initials(name)}
      </div>
    );
  }

  function LogoMark({ size = 38 }) {
    return (
      <div className="logo-mark" style={{ width: size, height: size }}>
        <svg width={size * 0.56} height={size * 0.56} viewBox="0 0 24 24" fill="none"
          stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M4 21V9l5-3v15" />
          <path d="M9 21V11l5 2.5" opacity="0.85" />
          <path d="M14 21v-7l5 3v4" opacity="0.7" />
          <path d="M16.5 8.5 19.5 5.5 22.5 8.5" />
          <path d="M19.5 5.5V12" />
        </svg>
      </div>
    );
  }

  window.Avatar = Avatar;
  window.LogoMark = LogoMark;
})();