function MainComponent() { const languages = [ 'Spanish', 'English', 'Hindi', 'Arabic', 'Portuguese', 'Bengali', 'Russian', 'Japanese', 'German', 'Korean', 'French', 'Turkish', 'Italian', 'Polish', 'Dutch', 'Greek', 'Hebrew', 'Swedish', 'Norwegian', 'Finnish' ]; const getRandomLanguageData = ()=>{ let randomIndex = Math.floor(Math.random() * languages.length); return { language: languages[randomIndex], sentence: `Sample sentence in ${languages[randomIndex]}.` }; }; const [currentLanguageData, setCurrentLanguageData] = React.useState(getRandomLanguageData()); const [inputValue, setInputValue] = React.useState(''); const [streak, setStreak] = React.useState(0); const handleInputChange = (event)=>{ setInputValue(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); if (inputValue.toLowerCase() === currentLanguageData.language.toLowerCase()) { let nextLanguageData; do { nextLanguageData = getRandomLanguageData(); }while (nextLanguageData.language === currentLanguageData.language) setCurrentLanguageData(nextLanguageData); setStreak((prevStreak)=>prevStreak + 1); } else { setStreak(0); } setInputValue(''); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto min-h-screen bg-gradient-to-r from-[#6ee7b7] to-[#3b82f6] flex justify-center items-center", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] bg-white p-8 shadow-lg rounded-lg mx-4", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-[#121212] font-bold", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Language Guessing Game"), /*#__PURE__*/ React.createElement("div", { className: "text-lg text-[#121212]", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "🔥"), " ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 48, columnNumber: 29 }, __self: this }, streak))), /*#__PURE__*/ React.createElement("p", { className: "text-[#121212] mb-6", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, currentLanguageData.sentence), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: inputValue, onChange: handleInputChange, name: "language-guess", className: "mb-4 p-2 border-[#121212] border-2 rounded focus:outline-none focus:border-[#3b82f6]", autoComplete: "off", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#3b82f6] text-white py-2 rounded hover:bg-[#2563eb] focus:outline-none", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Guess")))); }