import { createColumnHelper } from '@tanstack/react-table';
import propTypes from 'prop-types';
import { useMemo } from 'react';
import { DataTable } from '../common';

RecordTable.propTypes = {
  records: propTypes.array.isRequired,
  loading: propTypes.bool,
  order: propTypes.shape({
    id: propTypes.string.isRequired,
    desc: propTypes.bool.isRequired,
    onOrderBy: propTypes.func.isRequired,
  }),
  pagination: propTypes.shape({
    currentPage: propTypes.number.isRequired,
    pageSize: propTypes.number.isRequired,
    total: propTypes.number.isRequired,
    onPaginationChange: propTypes.func.isRequired,
  }).isRequired,
};

function RecordTable({ order, records, loading, pagination }) {
  const columnHelper = createColumnHelper();

  const columns = useMemo(
    () => [
      columnHelper.accessor('job_id', {
        header: 'Job Id',
      }),
      columnHelper.accessor('status', {
        header: 'Status',
      }),
    ],
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [],
  );

  return <DataTable loading={loading} columns={columns} data={records} pagination={pagination} order={order} />;
}

export default RecordTable;
