import { observer } from 'mobx-react-lite';
import VoiceStore from '@app/stores/VoiceStore';
import { VoiceParticipantItem } from './VoiceParticipantItem';
import styles from './VoiceParticipantsList.module.css';

interface VoiceParticipantsListProps {
	channelId: string;
}

export const VoiceParticipantsList = observer(function VoiceParticipantsList({ channelId }: VoiceParticipantsListProps) {
	// If we're connected to this specific channel, show the live LiveKit
	// participant list (full data: mute state, speaking, tracks). Otherwise
	// fall back to MatrixRTC memberships so the sidebar can show who's
	// currently in this voice channel — including users joined via Element
	// or Commet — before you click join.
	const participants =
		VoiceStore.connectedChannelId === channelId
			? VoiceStore.participants
			: VoiceStore.getParticipantsForChannel(channelId);

	if (participants.length === 0) return null;

	return (
		<div className={styles.container}>
			{participants.map((participant) => (
				<VoiceParticipantItem key={participant.identity} participant={participant} />
			))}
		</div>
	);
});
