import React, { Suspense, memo } from "react";

import { AdminHeader } from "@/components/AdminHeader";
import { TopHeader } from "@/components/TopHeader";
import { Spinner } from "@/assets/svgs";
import { LazyLoad } from "@/components/LazyLoad";

const navigation = [];

interface AdminWrapperProps {
  children: React.ReactNode;
}

const AdminWrapper = ({ children }: AdminWrapperProps) => {
  return (
    <LazyLoad>
      <div
        id="admin_wrapper"
        className={`flex h-full max-h-full min-h-full w-full max-w-full flex-col overflow-hidden bg-white`}
      >
        <div
          className={`relative flex h-full max-h-full min-h-full w-full max-w-full overflow-hidden`}
        >
          <AdminHeader />
          <div
            className={`grid h-full max-h-full min-h-full w-full grow grid-rows-[auto_1fr] overflow-x-hidden`}
          >
            <TopHeader />
            <Suspense
              fallback={
                <div
                  className={`flex h-full max-h-full min-h-full w-full items-center justify-center`}
                >
                  <Spinner size={40} color="#4F46E5" />
                </div>
              }
            >
              <div className="h-full max-h-full min-h-full w-full overflow-y-auto overflow-x-hidden">
                {children}
              </div>
            </Suspense>
          </div>
        </div>
      </div>
    </LazyLoad>
  );
};

export default memo(AdminWrapper);
