import { LiveAudienceList } from 'tuikit-atomicx-react';
import type { AudienceInfo } from 'tuikit-atomicx-react';

// 自定义组件属性，必须与 LiveAudienceList 组件 children 属性相同
interface CustomAudienceProps {
  params: {audience: AudienceInfo} 
}

// 用户自定义组件，显示用户角色
const CustomAudience: React.FC<CustomAudienceProps> = ({ params }) => {
  return (
    <div className="custom-audience-item">
      {
        params.audience.userRole === 2 ? "[观众]" : (params.audience.userRole === 1 ? "[管理员]" : "[主播]")
      }
    </div>
  );
};

const LivePlayer: React.FC<LivePlayerProps> = ({ className }) => {
  return (
    <div className={`${styles.livePlayer} ${className || ''}`}>
          <div className={styles.livePlayer__audienceListContent}>
            {/* 设置 height、className、style 属性 */}
            <LiveAudienceList height="100%" className="my-class-name" style={{backgroundColor: "transparent"}}>
              {(params) => <CustomAudience params={params} />} {/* 在播放页观众列表中，使用自定义组件， 显示用户角色 */}
            </LiveAudienceList>
          </div>
    </div>
  );
};