function ProfileIdentity({ name, handle, verified }) {
  return (
    <div className="px-5 pt-6 pb-6 flex flex-col items-center gap-3">
      <Avatar name={name} size={88} self />
      <div className="text-center">
        <div className="text-fg text-lg font-semibold tracking-[-0.02em]">{name}</div>
        <div className="text-[13px] text-fg-secondary font-mono mt-0.5">{handle}</div>
      </div>
      <div className="flex gap-2 mt-1">
        <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-sm bg-accent-subtle text-accent text-[11px] font-mono font-medium">
          <span
            className="w-1.5 h-1.5 rounded-full bg-accent"
            style={{ boxShadow: "0 0 6px var(--color-accent)" }}
          />
          online
        </span>
        {verified && (
          <span className="inline-flex items-center px-2 py-0.5 rounded-sm bg-transparent border border-line text-fg-secondary text-[11px] font-mono">
            verified
          </span>
        )}
      </div>
    </div>
  );
}

window.ProfileIdentity = ProfileIdentity;