'use client';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faXmark, faUser } from '@fortawesome/free-solid-svg-icons';
import type { ChatParticipant } from '@/types/chat';

type Props = {
	participants: ChatParticipant[];
	loading: boolean;
	onClose: () => void;
};

// 접속 참여자 목록 — 채팅 본체(.chat-room__body) 위에 오버레이. row: ICON·별명·SID·LEVEL(등급 Order)
export default function ChatParticipants({ participants, loading, onClose }: Props)
{
	return (
		<div className='chat-participants' role='dialog' aria-label='접속 참여자 목록'>
			<div className='chat-participants__head'>
				<span className='chat-participants__title'>접속자 {participants.length.toLocaleString()}명</span>
				<button type='button' className='chat-participants__close' onClick={onClose} aria-label='목록 닫기' title='목록 닫기'>
					<FontAwesomeIcon icon={faXmark} />
				</button>
			</div>
			<div className='chat-participants__body'>
				{loading ? (
					<div className='chat-participants__empty'>불러오는 중…</div>
				) : participants.length === 0 ? (
					<div className='chat-participants__empty'>접속 중인 회원이 없습니다.</div>
				) : (
					<ul className='chat-participants__list'>
						{participants.map((p, idx) => (
							<li key={p.sid ?? `${p.memberName}-${idx}`} className='chat-participants__item'>
								<span className='chat-participants__avatar'>
									{p.icon ? (
										// eslint-disable-next-line @next/next/no-img-element
										<img src={p.icon} alt='' aria-hidden='true' />
									) : (
										<FontAwesomeIcon icon={faUser} />
									)}
								</span>
								<span className='chat-participants__info'>
									<span className='chat-participants__name'>{p.memberName}</span>
									{p.sid && <span className='chat-participants__sid'>@{p.sid}</span>}
								</span>
								<span className='chat-participants__level' title='회원 등급'>Lv.{p.level}</span>
							</li>
						))}
					</ul>
				)}
			</div>
		</div>
	);
}