function RatingScale({ value, onChange, readonly }) { const [hover, setHover] = useState(null); const stars = Array.from({ length: 5 }).fill(0); return /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, stars.map((_, index)=>{ const starValue = index + 1; return /*#__PURE__*/ React.createElement("i", { key: index, className: `text-2xl cursor-pointer ${(hover || value) >= starValue ? "fas fa-star text-yellow-400" : "far fa-star text-gray-300"} ${readonly ? "cursor-default" : ""}`, onClick: ()=>!readonly && onChange?.(starValue), onMouseEnter: ()=>!readonly && setHover(starValue), onMouseLeave: ()=>!readonly && setHover(null), __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }); })); } function MainComponent({ rating = 0, onRatingChange, readonly = false }) { return /*#__PURE__*/ React.createElement(RatingScale, { value: rating, onChange: onRatingChange, readonly: readonly, __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }); } function StoryComponent() { const [rating1, setRating1] = useState(0); const [rating2, setRating2] = useState(3); return /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-4", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto mb-2", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Interactive Rating"), /*#__PURE__*/ React.createElement(MainComponent, { rating: rating1, onRatingChange: setRating1, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto mb-2", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "Readonly Rating (3 stars)"), /*#__PURE__*/ React.createElement(MainComponent, { rating: rating2, readonly: true, __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }))); }