function ToggleButtonWidget({ isRecording, onClick }) { const buttonText = isRecording ? 'Stop Recording' : 'Start Recording'; return /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 rounded font-roboto", onClick: onClick, __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, buttonText); } function ToggleButtonWidgetStory() { const [isRecording, setIsRecording] = React.useState(false); return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ToggleButtonWidget, { isRecording: isRecording, onClick: ()=>setIsRecording(!isRecording), __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ToggleButtonWidget, { isRecording: !isRecording, onClick: ()=>setIsRecording(isRecording), __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isRecording, setIsRecording] = React.useState(false); React.useEffect(()=>{ if (isRecording) { // Logic to start recording the call in mp3 format and store in internal memory } else { // Logic to stop recording the call } }, [ isRecording ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto text-[#010101] mb-8", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, "Phone Call Recorder"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-6 w-full max-w-[400px]", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-green-500 text-white p-2 rounded-full mr-2", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "📞"), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text text-lg", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, isRecording ? 'Currently Recording' : 'Not Recording')), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "format", className: "font-roboto mb-2", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Format"), /*#__PURE__*/ React.createElement("select", { id: "format", name: "format", className: "border rounded p-2 font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "mp3", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "MP3"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "memory", className: "font-roboto mb-2", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Memory"), /*#__PURE__*/ React.createElement("select", { id: "memory", name: "memory", className: "border rounded p-2 font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "internal", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Internal Memory"))), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 rounded font-roboto", onClick: ()=>setIsRecording(!isRecording), __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, isRecording ? 'Stop Recording' : 'Start Recording'))); }