function MainComponent() { const [difficulty, setDifficulty] = React.useState("medium"); const handleDifficultyChange = ()=>{ setDifficulty(difficulty === "medium" ? "expert" : "medium"); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f4f4f4] p-4", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#333] mb-8", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, "AI Trivia Challenge"), /*#__PURE__*/ React.createElement("div", { className: `bg-white shadow-lg rounded-lg w-full max-w-[500px] overflow-hidden ${difficulty === 'medium' ? 'bg-[url("/images/medium-bg.jpg")]' : 'bg-[url("/images/expert-bg.jpg")]'} bg-cover bg-center`, __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }, "Question 1/12"), /*#__PURE__*/ React.createElement("button", { onClick: handleDifficultyChange, className: `text-${difficulty === 'medium' ? '[#0077b6]' : '[#d00000]'} border-${difficulty === 'medium' ? '[#0077b6]' : '[#d00000]'} border-2 rounded-full px-4 py-1 hover:bg-${difficulty === 'medium' ? '[#0077b6]' : '[#d00000]'} hover:text-white transition-all`, __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, difficulty === 'medium' ? 'Expert Level' : 'Medium Level')), /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "What is the largest bone in the human body?"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#0077b6] text-white w-full py-2 rounded-lg", __source: { fileName: "", lineNumber: 28, columnNumber: 19 }, __self: this }, "Femur")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#0077b6] text-white w-full py-2 rounded-lg", __source: { fileName: "", lineNumber: 29, columnNumber: 19 }, __self: this }, "Tibia")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#0077b6] text-white w-full py-2 rounded-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 19 }, __self: this }, "Humerus")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#0077b6] text-white w-full py-2 rounded-lg", __source: { fileName: "", lineNumber: 31, columnNumber: 19 }, __self: this }, "Ulna"))))), /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-[#f4f4f4] flex justify-end", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-[#333] font-medium flex items-center", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-film mr-2", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }), "Share Your Session"))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#28a745] text-white px-6 py-2 rounded-full shadow-lg font-semibold hover:bg-[#218838] transition-all", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-play mr-2", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }), "Play Again"))); }