import { FunctionComponent } from 'react';
import { DataTable, DataTableProps } from 'primereact/datatable';
import LoadingPage from './LoadingPage';

type CustomTableGroupProps = DataTableProps<any> & {
  body: any[];
};

const TableGroup: FunctionComponent<CustomTableGroupProps> = ({ body, ...dataTableProps }) => {
  return dataTableProps.loading ? (
    <LoadingPage />
  ) : (
    <DataTable
      value={body}
      tableStyle={{ minWidth: '50rem', width: '100%' }}
      {...(dataTableProps.paginator && {
        paginator: true,
        paginatorTemplate:
          'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown',
        rowsPerPageOptions: [10, 25, 50],
        currentPageReportTemplate: 'Showing {first} to {last} of {totalRecords} entries',
      })}
      {...dataTableProps}
    ></DataTable>
  );
};

export default TableGroup;
