function MainComponent() { const [selectedServices, setSelectedServices] = React.useState([]); const [quantities, setQuantities] = React.useState({}); const services = { "Branding & Design": [ { name: "Concept Creation", price: 10000 }, { name: "Theme Design", price: 7500 }, { name: "Visual Design", price: 7500 } ] }; const toggleService = (category, serviceName, price)=>{ const serviceKey = `${category}-${serviceName}`; let newSelectedServices = [ ...selectedServices ]; let newQuantities = { ...quantities }; if (selectedServices.includes(serviceKey)) { newSelectedServices = newSelectedServices.filter((service)=>service !== serviceKey); delete newQuantities[serviceKey]; } else { newSelectedServices.push(serviceKey); newQuantities[serviceKey] = 1; } setSelectedServices(newSelectedServices); setQuantities(newQuantities); }; const handleQuantityChange = (serviceKey, quantity)=>{ setQuantities((prevQuantities)=>({ ...prevQuantities, [serviceKey]: parseInt(quantity) || 0 })); }; const calculateTotal = ()=>{ return selectedServices.reduce((total, serviceKey)=>{ const [category, serviceName] = serviceKey.split("-"); const service = services[category].find((service)=>service.name === serviceName); const quantity = quantities[serviceKey] || 0; return total + service.price * quantity; }, 0); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, Object.keys(services).map((category)=>/*#__PURE__*/ React.createElement("div", { key: category, __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, category), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, services[category].map((service)=>/*#__PURE__*/ React.createElement("button", { key: service.name, onClick: ()=>toggleService(category, service.name, service.price), className: `p-2 border ${selectedServices.includes(`${category}-${service.name}`) ? 'bg-green-200' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, service.name, " - ", service.price, " AED"))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "Selected Services"), /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "text-left", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "Service"), /*#__PURE__*/ React.createElement("th", { className: "text-left", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "Price"), /*#__PURE__*/ React.createElement("th", { className: "text-left", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "Quantity"), /*#__PURE__*/ React.createElement("th", { className: "text-left", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, "Total"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, selectedServices.map((serviceKey)=>{ const [category, serviceName] = serviceKey.split("-"); const service = services[category].find((service)=>service.name === serviceName); const quantity = quantities[serviceKey]; return /*#__PURE__*/ React.createElement("tr", { key: serviceKey, __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }, serviceName), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this }, service.price, " AED"), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", value: quantity, onChange: (e)=>handleQuantityChange(serviceKey, e.target.value), min: "1", className: "w-16 p-1", name: `quantity-${serviceName}`, __source: { fileName: "", lineNumber: 87, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }, service.price * quantity, " AED")); })))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, "Total Price: ", calculateTotal(), " AED")); }