function GreenClickableElement({ actionText }) { return /*#__PURE__*/ React.createElement("button", { className: "mt-3 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, actionText); } function GreenClickableElementStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GreenClickableElement, { actionText: "Go to Luna Reiz's Ad!", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function MainComponent({ imageSrcs, title, location, userType, actionText }) { const [activeIndex, setActiveIndex] = React.useState(0); const handleNext = ()=>{ setActiveIndex((prevIndex)=>(prevIndex + 1) % imageSrcs.length); }; const handlePrevious = ()=>{ setActiveIndex((prevIndex)=>(prevIndex - 1 + imageSrcs.length) % imageSrcs.length); }; return /*#__PURE__*/ React.createElement("div", { className: "relative w-full sm:w-[800px] mx-auto", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 right-0 flex justify-between items-center px-4 pt-4", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePrevious, className: "text-3xl text-white", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-circle-left", __source: { fileName: "", lineNumber: 15, columnNumber: 74 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleNext, className: "text-3xl text-white", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times-circle", __source: { fileName: "", lineNumber: 16, columnNumber: 70 }, __self: this }))), /*#__PURE__*/ React.createElement("img", { src: imageSrcs[activeIndex], alt: title + ' in ' + location, className: "w-full h-[500px] object-cover rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white py-3 px-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text text-lg", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, location), /*#__PURE__*/ React.createElement("div", { className: "text-sm opacity-75", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, userType), /*#__PURE__*/ React.createElement(GreenClickableElement, { actionText: actionText, __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-900 min-h-screen flex items-center justify-center p-5", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { imageSrcs: [ "/path/to/image1.jpg", "/path/to/image2.jpg", "/path/to/image3.jpg" ], title: "Luna Reiz", location: "Lisbon", userType: "Men · Women · Couples", actionText: "Go to Luna Reiz's Ad!", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this })); }