function ArabicLearningApp({ header, subheader, languages, onLanguageSelect }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-100 to-white p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, header), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-3 font-roboto", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, subheader), /*#__PURE__*/ React.createElement("ul", { className: "space-y-3", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, languages.map((language, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "p-4 bg-blue-500 rounded-lg text-white font-roboto", onClick: ()=>onLanguageSelect(language), __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, language))))); } function ArabicLearningAppStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ArabicLearningApp, { header: "Arabic Learning App", subheader: "Start Learning Arabic", languages: [ 'Arabic' ], onLanguageSelect: (language)=>alert(`Selected language: ${language}`), __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this })); } function MainComponent() { const [selectedLanguage, setSelectedLanguage] = React.useState(null); const handleLanguageSelect = (language)=>{ setSelectedLanguage(language); alert(`You selected ${language}`); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-100 to-white p-4", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ArabicLearningApp, { header: "Arabic Learning App", subheader: "Start Learning Arabic", languages: [ 'Arabic' ], onLanguageSelect: handleLanguageSelect, __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this })); }