import React from 'react';
import Pagination from '../public/Pagination';
import Spacer from '../public/Spacer';
import CoursesList from './CoursesList';
import { useTranslation } from 'react-i18next';
import { Spin } from 'antd';

/// 数据列表
function DataListWithPagination({
  coursesData,
  subsetTab,
  onPageChange,
  getCourses,
  currentPage,
  totalItems,
  itemsPerPage,
  loading,
}) {
  const { t, i18n } = useTranslation();

  if (coursesData == null || coursesData.length === 0) {
    return (
      <Spin spinning={loading} delay={0}>
        <div className='flex items-center justify-center p-4'>
          <p className='text-gray-400'>{t('暂无数据')}</p>
        </div>
      </Spin>
    );
  }
  return (
    <div className='flex flex-col flex-grow w-full h-full justify-between'>
      <Spin spinning={loading} delay={0}>
        <div>
          <CoursesList
            coursesData={coursesData}
            subsetTab={subsetTab}
            getCourses={getCourses}
          />
        </div>
      </Spin>
      <div>
        <Spacer height={10} />
        <Pagination
          totalItems={totalItems}
          itemsPerPage={itemsPerPage}
          currentPage={currentPage}
          onPageChange={onPageChange}
        />
      </div>
    </div>
  );
}

export default DataListWithPagination;
