function MainComponent() { const [selectedVenue, setSelectedVenue] = React.useState(null); const [venues, setVenues] = React.useState([]); const [date, setDate] = React.useState(new Date()); const [isBookingProcessActive, setBookingProcessActive] = React.useState(false); const [showVenueDetails, setShowVenueDetails] = React.useState(false); const handleVenueSelect = (venue)=>{ setSelectedVenue(venue); setShowVenueDetails(true); }; const handleDateChange = (event)=>{ setDate(event.target.value); }; const handleBookVenue = ()=>{ setBookingProcessActive(false); }; const handleConfirmBooking = ()=>{ // Confirm booking logic would go here setBookingProcessActive(true); setShowVenueDetails(false); }; const venueList = venues.map((venue, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-[#f3f4f6] p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg text-[#121212] mb-2", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, venue.name), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: venue.image, alt: `Image of ${venue.name}`, className: "h-[100px] w-[100px] object-cover rounded-md", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-grow ml-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#65676b] line-clamp-3", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, venue.description), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex justify-between items-center", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-xl text-[#121212]", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, venue.price), /*#__PURE__*/ React.createElement("button", { className: "text-white bg-[#2563eb] px-3 py-2 rounded-md shadow text-sm", onClick: ()=>handleVenueSelect(venue), __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "View Details")))))); const venueDetailsSection = showVenueDetails && selectedVenue && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4 p-4", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedVenue.image, alt: `Image of ${selectedVenue.name}`, className: "w-full h-[200px] object-cover rounded-md mb-2", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl text-[#121212] mb-2", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, selectedVenue.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-md text-[#65676b]", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, selectedVenue.description), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-xl text-[#121212]", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, selectedVenue.price), /*#__PURE__*/ React.createElement("button", { className: "text-white bg-[#22c55e] px-4 py-2 rounded-md shadow", onClick: handleConfirmBooking, __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "Book Now"))); const bookingConfirmationSection = isBookingProcessActive && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4 p-4", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl text-[#121212]", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Confirm Booking"), /*#__PURE__*/ React.createElement("button", { className: "text-sm text-[#2563eb]", onClick: ()=>setBookingProcessActive(false), __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "Change Date")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "date", className: "font-roboto text-[#65676b]", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Select Date"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", className: "p-2 border border-[#d1d5db] rounded-md", value: date.toLocaleDateString('en-CA'), onChange: handleDateChange, __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "text-white bg-[#22c55e] px-4 py-2 rounded-md shadow", onClick: ()=>{}, __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "Pay & Confirm"))); const mainContainerClasses = "w-full sm:w-[480px] mx-auto my-4 bg-white rounded-lg shadow"; const titleClasses = "text-2xl sm:text-3xl font-roboto text-center text-[#121212] pt-4 pb-2"; return /*#__PURE__*/ React.createElement("div", { className: mainContainerClasses, __source: { fileName: "", lineNumber: 78, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: titleClasses, __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, "Function Hall Booking"), showVenueDetails ? venueDetailsSection : isBookingProcessActive ? bookingConfirmationSection : venueList, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, ` .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } `)); }