function BlueApiButton({ onButtonClick, buttonText }) { return /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600", onClick: onButtonClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, buttonText); } function BlueApiButtonStory() { const handleClick = ()=>{ // Simulating API call with console log for demonstration console.log("I would like to know more about Al-Fatihah."); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BlueApiButton, { onButtonClick: handleClick, buttonText: "Ask about Al-Fatihah", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function MainComponent({ chapterNumber, chapterName, chapterMeaning, versesCount, onAskClick }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 bg-white rounded-lg shadow", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, chapterNumber), /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, chapterName), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, chapterMeaning), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, versesCount, " Ayahs"), /*#__PURE__*/ React.createElement(BlueApiButton, { onButtonClick: onAskClick, buttonText: "Ask about this Surah", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this })); } function StoryComponent() { function sendMessageToAPI(chapterName) { const messages = [ { role: 'user', content: `I would like to know more about ${chapterName}.` } ]; const requestOptions = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages, system_prompt: 'Explain this content' }) }; return fetch('/integrations/chat-gpt/conversationgpt4', requestOptions).then((response)=>response.json()).then((data)=>console.log(data)); } const askAboutSurah = (surahName)=>()=>sendMessageToAPI(surahName); return /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-10 bg-[#FCFCFC]", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { chapterNumber: "1", chapterName: "Al-Fatihah", chapterMeaning: "The Opener", versesCount: "7", onAskClick: askAboutSurah("Al-Fatihah"), __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { chapterNumber: "2", chapterName: "Al-Baqarah", chapterMeaning: "The Cow", versesCount: "286", onAskClick: askAboutSurah("Al-Baqarah"), __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this })); }