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

type Props = {id: string};

const ContainerScrapProvider: ChildrenFC<Props> = function({children, id}) {
  const {Provider} = context;
  const state = useContextReducer(id);

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

const ContainerScrap: FC<Props> = function({id}) {
  return (
    <ContainerScrapProvider id={id}>
      <SearchProvider context={searchContext}>
        <PageProvider context={pageContext}>
          <section className='content-main'>
            <Filter />
            <TableList />
          </section>
        </PageProvider>
      </SearchProvider>
    </ContainerScrapProvider>
  );
};

export default ContainerScrap;
