import {FC, ReactNode} from 'react';
import Filter from './filter';
import TableList from './table';
import {context, pageContext, useContextReducer} from './context';
import {PageProvider} from '@components';

const DepartmentProvider: FC<{children: ReactNode}> = function({children}) {
  const state = useContextReducer();
  const {Provider} = context;

  return <Provider value={state}>{children}</Provider>;
};

const Department: FC = function() {
  return (
    <DepartmentProvider>
      <PageProvider context={pageContext}>
        <section className='content-main'>
          <Filter />
          <TableList />
        </section>
      </PageProvider>
    </DepartmentProvider>
  );
};

export default Department;
