function NextButtonDesign({ onButtonClick, buttonText = "Next" }) { return /*#__PURE__*/ React.createElement("button", { type: "button", onClick: onButtonClick, className: "mt-4 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, buttonText); } function NextButtonDesignStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NextButtonDesign, { onButtonClick: ()=>console.log('Next step triggered'), __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent() { const [step, setStep] = React.useState(1); const [region, setRegion] = React.useState(''); const [carNeeds, setCarNeeds] = React.useState(''); const [preferredMake, setPreferredMake] = React.useState(''); const handleNextStep = ()=>setStep((currentStep)=>currentStep + 1); let content; if (step === 1) { content = /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, "Tell us about your region"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "region", placeholder: "Enter your region", value: region, onChange: (e)=>setRegion(e.target.value), className: "w-full p-2 border rounded-md", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(NextButtonDesign, { onButtonClick: handleNextStep, __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this })); } else if (step === 2) { content = /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "What are your basic car needs?"), /*#__PURE__*/ React.createElement("textarea", { name: "carNeeds", placeholder: "Describe your needs", value: carNeeds, onChange: (e)=>setCarNeeds(e.target.value), className: "w-full p-2 border rounded-md resize-none", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(NextButtonDesign, { onButtonClick: handleNextStep, __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this })); } else if (step === 3) { content = /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "What's your preferred car make?"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "preferredMake", placeholder: "Enter preferred car make", value: preferredMake, onChange: (e)=>setPreferredMake(e.target.value), className: "w-full p-2 border rounded-md", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(NextButtonDesign, { onButtonClick: handleNextStep, __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this })); } else { content = /*#__PURE__*/ React.createElement("div", { className: "text-center space-y-4", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Building your AR model..."), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "Region: ", region, /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 60, columnNumber: 27 }, __self: this }), "Needs: ", carNeeds, /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 61, columnNumber: 28 }, __self: this }), "Preferred Make: ", preferredMake, /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 62, columnNumber: 42 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[200px] h-[200px] bg-gray-300", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }))); } return /*#__PURE__*/ React.createElement("div", { className: "p-4 max-w-md mx-auto", __source: { fileName: "", lineNumber: 72, columnNumber: 5 }, __self: this }, content); }