function MainComponent() { const [loading, setLoading] = React.useState(false); const [result, setResult] = React.useState(null); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); const messages = [ { role: 'user', content: 'Make a link-2 monster for "mayakashi" "Zombies" and "Shiranui".' } ]; try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages }) }); const data = await response.json(); setResult(data.choices[0].message.content); } catch (error) { console.error('Error:', error); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "Yu-Gi-Oh! Link Monster Creator"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-md p-6 bg-white rounded shadow-md", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-crimson-text", htmlFor: "monster_type", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Monster Type"), /*#__PURE__*/ React.createElement("input", { className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2", id: "monster_type", name: "monster_type", defaultValue: "Mayakashi", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-crimson-text", htmlFor: "archetype", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Archetype"), /*#__PURE__*/ React.createElement("input", { className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2", id: "archetype", name: "archetype", defaultValue: "Shiranui", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white p-2 rounded-md font-bold hover:bg-blue-600 transition-all duration-200 font-crimson-text", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, loading ? 'Loading...' : 'Create Link-2 Monster'))), result && /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-full max-w-md p-4 bg-white rounded shadow-md", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2 font-crimson-text", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Generated Monster:"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-crimson-text", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, result))); }