import { Box, Flex } from 'ui/grid';
import elementsRender from '../../config/elements-render';
import { id, title } from './config';
import PaymentsParams from './PaymentsParams';
import PaymentsTable from './PaymentsTable';

function Payments() {
  const radioGraphType = elementsRender.radioGraphType.render();

  return (
    <Flex flexDirection="column">
      <Box
        sx={{
          display: 'grid',
          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr'],
          gap: '10px',
        }}
      >
        {radioGraphType}
        <PaymentsParams />
      </Box>
      <PaymentsTable />
    </Flex>
  );
}

export default {
  id,
  title,
  Component: Payments,
};