import React, { type FC } from "react";
import type { Call } from "../../../models/Call";
import { useParticipatingMembers } from "../../../hooks/useCall";
import MemberAvatar from "../avatars/MemberAvatar";

export const RoomTileCallParticipants: FC<{ call: Call }> = ({ call }) => {
    const members = useParticipatingMembers(call);
    if (members.length === 0) return null;

    return (
        <ul className="mx_RoomTile_callParticipants">
            {members.map((m) => (
                <li key={m.userId} className="mx_RoomTile_callParticipant">
                    <MemberAvatar member={m} size="20px" />
                    <span className="mx_RoomTile_callParticipantName">
                        {m.name}
                    </span>
                </li>
            ))}
        </ul>
    );
};