<div className={cn('profile-top', className)}>
  <div
    className={cn('profile-banner', bannerClassName)}
    style={{ backgroundImage: `url(${coverUrl})` }}
  >
    {coverAction && (
      <div className="absolute inset-e-3 top-3 z-10">{coverAction}</div>
    )}
    <div className="stats-holder">
      <div
        className="profile-photo relative"
        style={{ backgroundImage: `url(${profile.imageUrl})` }}
      >
        {avatarAction && (
          <div className="absolute bottom-1 inset-e-1 z-10">
            {avatarAction}
          </div>
        )}
      </div>

      {(stats || statsContent) && (
        <div className="action-stats">
          <div className="flex items-center gap-2">
            {beforeStats}
            {statsContent ?? (
              <div className="profile-stats">
                {stats?.map((stat) => (
                  <div key={stat.label} className="profile-stat ml-1">
                    <span>{intStr(stat.value)}</span> {stat.label}
                  </div>
                ))}
              </div>
            )}
          </div>
          {actions && <div className="profile-actions">{actions}</div>}
        </div>
      )}
    </div>
  </div>
</div>