import { VoiceParticipantTile, type VoiceParticipantTileData } from './VoiceParticipantTile';
import styles from './VoiceGridLayout.module.css';

interface VoiceGridLayoutProps {
	participants: VoiceParticipantTileData[];
}

export function VoiceGridLayout({ participants }: VoiceGridLayoutProps) {
	const tileCount = participants.length;

	return (
		<div className={styles.gridContainer}>
			<div className={styles.grid} data-tile-count={tileCount}>
				{participants.map((p) => (
					<div key={p.userId} className={styles.gridItem}>
						<VoiceParticipantTile participant={p} />
					</div>
				))}
			</div>
		</div>
	);
}
