function LanguagePicker({ title, languages }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-sm p-6 bg-white shadow-md", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("ul", { className: "mt-4", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, languages.map((lang, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mt-2", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full py-2 bg-blue-500 text-white rounded-md font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, lang))))); } function LanguagePickerStory() { const languagesSample = [ "English", "Spanish", "French", "German" ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(LanguagePicker, { title: "Pick a Language", languages: languagesSample, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [screen, setScreen] = React.useState(1); const [selectedLanguage, setSelectedLanguage] = React.useState(null); const languages = [ "Spanish", "French", "German", "Chinese" ]; const difficultyLevels = [ "Easy", "Just Right", "Hard" ]; function handleLanguageSelection(language) { setSelectedLanguage(language); setScreen(2); } function handleDifficultyLevel(level) { // Implement logic to adjust difficulty based on the level selected } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, screen === 1 && /*#__PURE__*/ React.createElement(LanguagePicker, { title: "Pick a Language", languages: languages, __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }), screen === 2 && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-6 bg-white shadow-md mt-6", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Audio Lesson in ", selectedLanguage), /*#__PURE__*/ React.createElement("audio", { controls: true, className: "w-full mt-4", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: "audio/sample.mp3", type: "audio/mp3", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-gray-200 rounded-md", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "This is a sample transcript for the foreign language lesson that you are listening to.")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-between", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, difficultyLevels.map((level)=>/*#__PURE__*/ React.createElement("button", { key: level, onClick: ()=>handleDifficultyLevel(level), className: "py-2 px-4 bg-green-500 text-white rounded-md font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, level))))); }