import React, { useCallback, useContext, useEffect, useState } from 'react';
import { useHistory, useLocation } from 'react-router';
import SocketContext from '../../contexts/SocketContext';
import { MessageResponse, MessageType, RawMessage } from '../common/types';
import { RoomData, UpdateRoomUser } from './types';

interface RoomInfoProps {
  roomData: RoomData;
}

export const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => {
  return (
    <div className='m-3 w-5/6 flex items-center place-content-between'>
      <div>{roomData.name}</div>
      <div>{roomData.users.length}/{roomData.maxUsers}</div>
    </div>
  );
}