import type { IRemoteVideoTrack, } from "agora-rtc-react";


import { NameContainer } from "./NameContainer";
import AutoLayout from "./AutoLayout";
import { fakeAvatar, fakeName } from "../../utils/Fake";
import { RemoteVideoPlayer } from "./RemoteVideoPlayer";

export function RenderRemoteUsers({ videoTracks }: { videoTracks: IRemoteVideoTrack[] }) {
  return (
    <>
      {videoTracks.map((track: IRemoteVideoTrack) => (
        <AutoLayout.Item key={track.getUserId()}>
          <RemoteVideoPlayer cover={fakeAvatar()} key={track.getUserId()} track={track} />
          <NameContainer>{`${fakeName(track.getUserId())}{${track.getUserId()}}`}</NameContainer>
        </AutoLayout.Item>
      ))}
    </>
  );
}