import React from 'react';

export default function Lobby({userName, handleUserNameChange, roomName, handleRoomNameChange, handleSubmit}) {

  return (
    <form onSubmit={handleSubmit}>
      <h2>Enter a room</h2>
      <div>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" value={userName} onChange={handleUserNameChange} required/>
      </div>
      <div>
        <label htmlFor="room">Room Name:</label>
        <input type="text" id="room" value={roomName} onChange={handleRoomNameChange} required/>
      </div>
      <button type="submit">Submit</button>
    </form>
  );

}