import React, { Suspense, lazy } from "react";
import { Spin } from "antd";
import { useGetAllCourse } from "../../api/course";
// import { ABILITIES_ENUM } from "../../enums/abilities";
// import useSetPage_title from "../../Hooks/useSetPageTitle";
import { useTranslation } from "react-i18next";

const HeaderCardsSection = lazy(() => import("../../Components/Course/CourseHeaderSection"));
const AddModalForm = lazy(() => import("./Model/AddModel"));
// const AreaChart = lazy(() => import("./Chart/AreaChart"));

const Course = () => {
  const [t] = useTranslation();
  // useSetPage_title(
  //   `${t(ABILITIES_ENUM?.MAIN_PAGE)}  /  ${t(`models.${ABILITIES_ENUM.COURSE}`)}`,
  // );

  const { data, isLoading } = useGetAllCourse();


  return (
    <div className="Course">
        <Suspense fallback={<Spin />}>

        <HeaderCardsSection data={data} isLoading={isLoading} />
        <AddModalForm />
        {/* <AreaChart /> */}
        
      </Suspense>
    </div>
  );
};

export default Course;
