import { useRef } from 'react';

function Form() {
  const nameRef = useRef();
  const programRef = useRef();

  function formSubmitHandler(event) {
    event.preventDefault();

    const enteredName = nameRef.current.value;
    const selectedProgram = programRef.current.value;

    console.log('Wpisane imię: ' + enteredName);
    console.log('Wybrany program: ' + selectedProgram);
  }

  return (
    <form onSubmit={formSubmitHandler}>
      <div className="form-control">
        <label htmlFor="name">Imię</label>
        <input type="text" id="name" ref={nameRef} />
      </div>
      <div className="form-control">
        <label htmlFor="program">Wybierz program</label>
        <select id="program" ref={programRef}>
          <option value="podstawowy">Podstawowy</option>
          <option value="zaawansowany">Zaawansowany</option>
          <option value="mistrzowski">Mistrzowski</option>
        </select>
      </div>
      <button>Wyślij</button>
    </form>
  );
}

export default Form;
