import React from "react";
import App000001 from "./app000001";
import App000002 from "./app000002";

import { PageProps } from "./interFaces";

export const PageIndexs = {
  app000001: App000001,
  app000002: App000002,
};

function UnAuthorizedPage({ lang, queryParams }: PageProps) {
  return (
    <>
      <div className="flex flex-col h-screen">
        <header className="bg-gray-800 text-white p-4 text-center">
          <h1 className="text-2xl font-bold">Unauthorized Access</h1>
        </header>
        <main className="flex-grow p-4 bg-gray-100">
          <p className="text-gray-700">
            You do not have permission to access this page.
          </p>
          <p className="text-gray-700">Please contact the administrator.</p>
        </main>
        <footer className="bg-gray-800 text-white p-4 text-center">
          <p>&copy; 2023 My Application</p>
        </footer>
      </div>
    </>
  );
}

export function retrievePage({
  pageId,
}: {
  pageId: string;
}): React.ComponentType<PageProps> {
  const PageComponent = PageIndexs[pageId as keyof typeof PageIndexs];
  if (!PageComponent) {
    return UnAuthorizedPage;
  }
  return PageComponent;
}

export default retrievePage;
