import { useState } from 'react';

import Error from './Error';

function Form() {
  const [enteredEmail, setEnteredEmail] = useState('');
  const [errorMessage, setErrorMessage] = useState('');

  function updateEmailHandler(event) {
    setEnteredEmail(event.target.value);
  }

  function submitFormHandler(event) {
    event.preventDefault();
    if (!enteredEmail.endsWith('.com')) {
      setErrorMessage('Akceptowane są tylko adres e-mail z końcówką .com!');
    }
  }

  return (
    <form onSubmit={submitFormHandler}>
      <div>
        <label>Adres e-mail</label>
        <input type="email" onChange={updateEmailHandler} />
      </div>
      {errorMessage && <Error message={errorMessage} />}
      <button>Wyślij</button>
    </form>
  );
}

export default Form;
