1  export default function Options({ tripInformation, setTripInformation }) {
 2    const handleRoundTrip = (e) => {
 3      setTripInformation((update) => {
 4        update.roundtrip = e.target.checked;
 5      });
 6      let kilometers = tripInformation.distance_kilometer;
 7      let minutes = tripInformation.time_minutes;
 8  
 9      if (e.target.checked) {
10        kilometers = kilometers * 2;
11        minutes = minutes * 2;
12      } else {
13        kilometers = kilometers / 2;
14        minutes = minutes / 2;
15      }
16  
17      setTripInformation((update) => {
18        update.distance_kilometer = Math.floor(kilometers);
19      });
20  
21      setTripInformation((update) => {
22        update.time_minutes = Math.floor(minutes);
23      });
24    };
25  
26    const handleFreeParking = (e) => {
27      setTripInformation((update) => {
28        update.free_parking = e.target.checked;
29      });
30    };
31  
32    return (
33      <div className="mt-4 grid gap-2 sm:grid-cols-2">
34        <label
35          htmlFor="roundtrip"
36          className="block flex w-full rounded-lg border border-gray-200 bg-white p-3 text-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-slate-900 dark:text-gray-400"
37        >
38          <input
39            type="checkbox"
40            className="mt-0.5 shrink-0 rounded border-gray-200 text-blue-600 focus:ring-blue-500 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:checked:border-blue-500 dark:checked:bg-blue-500 dark:focus:ring-offset-gray-800"
41            id="roundtrip"
42            checked={tripInformation.roundtrip}
43            onChange={handleRoundTrip}
44          />
45          <span className="ms-3 text-sm text-gray-500 dark:text-gray-400">
46            Heen en weer
47          </span>
48        </label>
49  
50        <label
51          htmlFor="include-scooters"
52          className="block flex w-full rounded-lg border border-gray-200 bg-white p-3 text-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-slate-900 dark:text-gray-400"
53        >
54          <input
55            type="checkbox"
56            className="mt-0.5 shrink-0 rounded border-gray-200 text-blue-600 focus:ring-blue-500 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:checked:border-blue-500 dark:checked:bg-blue-500 dark:focus:ring-offset-gray-800"
57            id="include-scooters"
58            checked={tripInformation.free_parking}
59            onChange={handleFreeParking}
60          />
61          <span className="ms-3 text-sm text-gray-500 dark:text-gray-400">
62            Gratis parkeren
63          </span>
64        </label>
65      </div>
66    );
67  }