function MainComponent() { const [from, setFrom] = React.useState(''); const [to, setTo] = React.useState(''); const [fleet, setFleet] = React.useState(''); const [costPerKm, setCostPerKm] = React.useState(null); const [tollInfo, setTollInfo] = React.useState(null); const [processing, setProcessing] = React.useState(false); const [distance, setDistance] = React.useState(null); const [paymentProcessing, setPaymentProcessing] = React.useState(false); const handleFleetChange = (e)=>{ const selectedFleet = e.target.value; setFleet(selectedFleet); if (selectedFleet === 'SUV') { setCostPerKm(10); setTollInfo('Approx toll: $5'); } else if (selectedFleet === 'Sedan') { setCostPerKm(8); setTollInfo('Approx toll: $4'); } else { setCostPerKm(null); setTollInfo(null); } }; const handleBooking = ()=>{ setProcessing(true); setTimeout(()=>{ setProcessing(false); setPaymentProcessing(true); processPayment(); }, 1000); }; const processPayment = ()=>{ setTimeout(()=>{ alert('Payment Completed'); setPaymentProcessing(false); }, 2000); }; const calculateDistance = ()=>{ setDistance(50); }; const handleFromChange = (e)=>{ setFrom(e.target.value); if (to) calculateDistance(); }; const handleToChange = (e)=>{ setTo(e.target.value); if (from) calculateDistance(); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex items-center justify-between p-4 bg-white shadow-md", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "Car Rental Booking")), /*#__PURE__*/ React.createElement("main", { className: "mt-4", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "bg-white p-4 rounded-md shadow-md", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-roboto", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "From"), /*#__PURE__*/ React.createElement("input", { name: "from", type: "text", value: from, onChange: handleFromChange, className: "w-full p-2 border rounded-md", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-roboto", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "To"), /*#__PURE__*/ React.createElement("input", { name: "to", type: "text", value: to, onChange: handleToChange, className: "w-full p-2 border rounded-md", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-roboto", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "Select Fleet"), /*#__PURE__*/ React.createElement("select", { name: "fleet", value: fleet, onChange: handleFleetChange, className: "w-full p-2 border rounded-md", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, "Choose a fleet"), /*#__PURE__*/ React.createElement("option", { value: "SUV", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, "SUV"), /*#__PURE__*/ React.createElement("option", { value: "Sedan", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, "Sedan"))), fleet && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }, "Cost per Km: $", costPerKm)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, tollInfo))), distance && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, "Distance: ", distance, " km")), /*#__PURE__*/ React.createElement("button", { onClick: handleBooking, disabled: processing || paymentProcessing, className: "w-full p-2 bg-blue-500 text-white font-roboto rounded-md", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, processing ? 'Processing...' : paymentProcessing ? 'Processing Payment...' : 'Book')))); }