import React, {lazy, Suspense} from 'react';
import localizeSettings from "./localizeSettings";
import ErrorBoundary from "../components/ErrorBoundary";
import Fallback from "../components/Fallback";

const AdminSettings = lazy(() => import("./AdminSettings"));
const ProductDataMetaSettings = lazy(() => import("./ProductDataMetaSettings"));
const ProductQuickEditMetaSettings = lazy(() => import("./ProductQuickEditMetaSettings"));

const appName = localizeSettings.appName;

const App = () => {
	return (
		<ErrorBoundary>
			{(appName === 'AdminSettings') && (
				<Suspense fallback={<Fallback/>}>
					<AdminSettings/>
				</Suspense>
			)}
			{(appName === 'ProductDataMetaSettings') && (
				<Suspense fallback={<Fallback/>}>
					<ProductDataMetaSettings/>
				</Suspense>
			)}
			{(appName === 'ProductQuickEditMetaSettings') && (
				<Suspense fallback={<Fallback/>}>
					<ProductQuickEditMetaSettings/>
				</Suspense>
			)}
		</ErrorBoundary>
	);
};

export default App;