import { useTranslation } from "react-i18next";
import { lazy, Suspense } from 'react';
import { Spin } from "antd";

const Table = lazy(() => import('./Table'));
const AddModalForm = lazy(() => import('./Model/AddModel'));
const EditModalForm = lazy(() => import('./Model/EditModel'));
const DeleteModels = lazy(() => import('./Model/Delete'));

const TableHeader = () => {
  const [t] = useTranslation();
  return (
    <div className="TableWithHeader">
      <Suspense fallback={<Spin/>}>
      <header>
        <h6>
          {t("models.lesson")}
        </h6>

      </header>
        <Table />
        <AddModalForm />
      <EditModalForm />
      <DeleteModels />
      </Suspense>

    </div>
  );
};

export default TableHeader;
