import React, { useState } from 'react';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';

function FormInput() {
  const [tytul, setTytul] = useState('');
  const [rodzaj, setRodzaj] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(`tytul: ${tytul}; rodzaj: ${rodzaj}`);
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Group>
        <Form.Label>Tytuł filmu</Form.Label>
        <Form.Control
          type="text"
          value={tytul}
          onChange={(e) => setTytul(e.target.value)}
        />
        <br />
        <Form.Label>Rodzaj</Form.Label>
        <Form.Select
          value={rodzaj}
          onChange={(e) => setRodzaj(e.target.value)}
        >
          <option value="">Wybierz</option>
          <option value="Komedia">Komedia</option>
          <option value="Obyczajowy">Obyczajowy</option>
          <option value="Horror">Horror</option>
        </Form.Select>
        <br />
        <Button type="submit">Dodaj</Button>
      </Form.Group>
    </Form>
  );
}

export default FormInput;