import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {

  const [packageName, setPackageName] = useState('');
  const [choice, setChoice] = useState(0);

  const handleSubmit = () => {
    console.log(packageName, choice);
  }
  return (
    <div className="App p-4">
        <div class="mb-3">
          <label class="form-label">ENazwa przesyłki</label>
          <input class="form-control" onChange={e => setPackageName(e.target.value)}  />
        </div>
        <div class="border p-2">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="choice" value={1} onChange={e => setChoice(e.target.value)}/>
              <label class="form-check-label">
                Przesyłka S
              </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="choice" value={2}  onChange={e => setChoice(e.target.value)}/>
              <label class="form-check-label">
                Przesyłka M
              </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="choice" value={3}  onChange={e => setChoice(e.target.value)}/>
              <label class="form-check-label">
                Przesyłka L
              </label>
          </div>
        </div>
        <button type="submit" class="btn btn-primary" onClick={handleSubmit}>Dodaj</button>
    </div>
  );
}

export default App;