import { useState } from "react";
function GuessInput({ handleSubmittedGuess, gameStatus }) {
  const [inProgressGuess, setInProgressGuess] = useState("");

  function handleSubmission(event) {
    event.preventDefault();
    console.log({ inProgressGuess });

    handleSubmittedGuess(inProgressGuess);

    setInProgressGuess("");
  }
  return (
    <form onSubmit={handleSubmission}>
      <label htmlFor="guess">Enter guess:</label>
      <input
        type="text"
        id="guess-input"
        value={inProgressGuess}
        onChange={(event) =>
          setInProgressGuess(event.target.value.toUpperCase())
        }
        pattern="[A-Za-z]{5}"
        title="Use a 5 letter word please"
        disabled={gameStatus !== "in-progress"}
      />
    </form>
  );
}

export default GuessInput;