function MainComponent({ title, inputPlaceholder, options, onOptionChange, selectedOption, buttonText, onBackClick, onLinkCreate, copyText }) { const radioOptions = options.map((option, index)=>/*#__PURE__*/ React.createElement("label", { key: option, className: "flex items-center py-2 border-b border-[#D1D5DB] last:border-0", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "app", value: option, checked: selectedOption === option, onChange: onOptionChange, className: "text-blue-600 focus:ring-blue-500", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-sm font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, option))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col bg-white px-4 py-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onBackClick, className: "text-blue-600 text-left mb-4 font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-arrow-left pr-2", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }), title), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Name your link"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: inputPlaceholder, className: "bg-[#F9FAFB] text-sm rounded-lg w-full py-4 px-3 border border-[#D1D5DB] focus:ring-blue-500 focus:border-blue-500", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("fieldset", { className: "mb-6", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("legend", { className: "block text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, copyText), radioOptions), /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-blue-600 text-white text-sm font-roboto w-full py-4 px-3 rounded-lg", onClick: onLinkCreate, __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, buttonText)); } function StoryComponent() { const [selectedOption, setSelectedOption] = React.useState('Facebook'); const handleOptionChange = (e)=>{ setSelectedOption(e.target.value); }; const handleBackClick = ()=>{ console.log('Back button clicked'); }; const handleLinkCreate = ()=>{ console.log('Create Link button clicked', selectedOption); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(MainComponent, { title: "Create a referral link", inputPlaceholder: "Enter your business name", options: [ 'Facebook', 'Twitter', 'LinkedIn', 'Email', 'SMS' ], onOptionChange: handleOptionChange, selectedOption: selectedOption, buttonText: "Create Link", onBackClick: handleBackClick, onLinkCreate: handleLinkCreate, copyText: "Choose a platform for your referral link", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { title: "Update your referral link", inputPlaceholder: "Update your business name", options: [ 'Instagram', 'WhatsApp', 'Pinterest', 'YouTube', 'TikTok' ], onOptionChange: handleOptionChange, selectedOption: 'Instagram', buttonText: "Update Link", onBackClick: handleBackClick, onLinkCreate: handleLinkCreate, copyText: "Select a new platform for your referral link", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this })); }