import * as React from 'react';
import { UsercentricsProvider, useUsercentrics } from '../../contexts/UsercentricsContext';
import { ContentCategories } from '../DetailsModal/ContentCategories';
import type { UsercentricsProviderProps } from '../../contexts/UsercentricsContext/types';

const AllServicesListByCategoryInternal = (): JSX.Element => {
  const context = useUsercentrics();
  return <ContentCategories categories={context.categories} />;
};

export type AllServicesListByCategoryProps = UsercentricsProviderProps;

export const AllServicesListByCategory: React.ComponentType<AllServicesListByCategoryProps> = (props): JSX.Element => {
  return (
    <UsercentricsProvider {...props}>
      <AllServicesListByCategoryInternal />
    </UsercentricsProvider>
  );
};