import { MAX_LEASING_PERIOD } from 'constants/values';
import Table from 'elements/Table';
import { toJS } from 'mobx';
import { observer } from 'mobx-react-lite';
import { useStore } from 'stores/hooks';
import { columns } from './config';

const PaymentsTable = observer(() => {
  const { $results } = useStore();

  return (
    <Table
      columns={columns}
      dataSource={toJS($results.payments)}
      size="small"
      pagination={{
        defaultPageSize: 12,
        pageSizeOptions: [12, MAX_LEASING_PERIOD],
        responsive: true,
      }}
      scroll={{
        x: true,
      }}
    />
  );
});

export default {
  id: 'payments-table',
  title: 'Таблица платежей',
  Component: PaymentsTable,
};