import React from 'react';
import { Room } from './types';

interface RoomProps {
  room: Room
}

export const RoomInfo: React.FC<RoomProps> = ({ room }) => {
  return (
    <div className={`flex items-center place-content-between m-2 w-5/6 
                  ${room.currentUsers < room.maxUsers ?
                    'bg-white active:bg-green-100' :
                    'bg-gray-200 active:bg-gray-200'}
                  rounded shadow hover:shadow-md`}>
      <span className='mt-2 mb-2 ml-3 text-gray-600 text-lg'>{room.name}</span>
      <span className='mt-2 mb-2 mr-3 text-gray-500 text-right'>
        {room.currentUsers}/{room.maxUsers}
      </span>
    </div>
  );
}