function MainComponent({ movieTitle, rating, bathroomBreak, onRatingChange, onBathroomBreakChange }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#F2F2F2] p-4 rounded-lg w-full max-w-[400px] mx-auto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-roboto text-[#121212] mb-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, movieTitle), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm text-[#666]", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, "Rating:"), /*#__PURE__*/ React.createElement("input", { type: "number", step: "0.1", min: "0", max: "5", value: rating, onChange: onRatingChange, className: "font-roboto text-lg text-[#121212] w-16", name: "rating", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm text-[#666]", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "Best Bathroom Break:"), /*#__PURE__*/ React.createElement("input", { type: "text", value: bathroomBreak, onChange: onBathroomBreakChange, className: "font-roboto text-lg text-[#121212]", name: "bathroomBreak", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }))); } function StoryComponent() { const handleRatingChange = (event)=>{ console.log(event.target.value); }; const handleBathroomBreakChange = (event)=>{ console.log(event.target.name, event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 py-8", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { movieTitle: "Interstellar", rating: "4.5", bathroomBreak: "45 minutes in", onRatingChange: handleRatingChange, onBathroomBreakChange: handleBathroomBreakChange, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { movieTitle: "Mad Max: Fury Road", rating: "4.7", bathroomBreak: "30 minutes in", onRatingChange: handleRatingChange, onBathroomBreakChange: handleBathroomBreakChange, __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { movieTitle: "Inception", rating: "4.8", bathroomBreak: "1 hour in", onRatingChange: handleRatingChange, onBathroomBreakChange: handleBathroomBreakChange, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this })); }