import { FC } from "react";

import { RoomState } from "modules/room/slice";

const Members: FC<Props> = ({ room }) => {
  const children = [];
  for (const member of room.members) {
    children.push(<li key={member}>{member}</li>);
  }

  return <ul>{children}</ul>;
};

interface Props {
  room: RoomState;
}

const RoomDetails: FC<Props> = ({ room }) => (
  <div className="flex flex-col gap-3 w-80 p-3 overflow-auto">
    <h3>Members ({room.userCount})</h3>
    <Members room={room} />
  </div>
);

export default RoomDetails;