import React, {useState} from 'react';

type Props = {
    addRoom: (name: string) => void;
}

const NewRoomForm: React.FC<Props> = (props) => {
    const [name, setName] = useState('');

    function addRoom(ev: React.FormEvent) {
        ev.preventDefault();

        props.addRoom(name);

        setName('');
	}

    return (
        <form action="#" onSubmit={addRoom}>
            <input
                className="newgroup-name"
                value={name}
                placeholder="Room name"
                onChange={(event) => {setName(event.target.value)}} />

            <input type="submit" value="Create" />
        </form>
    )
}

export default NewRoomForm;