import { FormEventHandler } from "react";
import "./MeetingNameInput.css";

function MeetingNameInput(props: {
  roomName: string;
  setName: (name: string) => void;
  submit: FormEventHandler;
  currentUser: string;
}) {
  const onInput: React.ChangeEventHandler<HTMLInputElement> = (event) => {
    props.setName(event.target.value);
    event.preventDefault();
  };

  console.log("[Rooms] MeetingName input comp");
  return (
    <div className="meeting-name-input">
      <h1>Greetings {props.currentUser}</h1>
      <form onSubmit={props.submit}>
        <input
          placeholder="Roomname"
          type="text"
          value={props.roomName}
          onChange={onInput}
        />
        <button type="submit">Enter the adventure</button>
      </form>
    </div>
  );
}

export default MeetingNameInput;