docs: function ParticipantItem({
    detail,
    avatarUrl,
    onRemove,
    currentLocale,
  }) {
    return (
      <MediaObject
        containerCls={styles.participantItem}
        mediaLeft={
          <div className={styles.avatar}>
            <CallAvatar isOnConferenceCall={false} avatarUrl={avatarUrl} />
          </div>
        }
        mediaBody={<div title={detail} className={styles.detail}>{detail}</div>}
        mediaRight={
          <span title={i18n.getString('removeParticipant', currentLocale)} className={styles.webphoneButton}>
            <CircleButton
              className={styles.rejectButton}
              onClick={(e) => {
                e.stopPropagation();
                onRemove();
              }}
              iconWidth={260}
              iconX={120}
              icon={EndIcon}
              showBorder={false}
            />
          </span>
       }
      />
    );
  }