Section.tsx

import React, { FunctionComponent } from 'react';
import useHeadingContext from '../../utilities/headings/hooks';
import { HeadingContext } from '../../utilities/headings';
import { HEADING_LEVEL_MAX } from '../../utilities/headings/constants';

/**
 * The `Section` component offers a way to encapsulate a series of related
 * content offering a series of helpers managing automatically heading levels
 * for example.
 */
const Section: FunctionComponent = ({ children }) => {
  const currentHeadingLevel = useHeadingContext();
  const sectionHeadingLevel = Math.min(
    currentHeadingLevel + 1,
    HEADING_LEVEL_MAX,
  );

  return (
    <HeadingContext.Provider value={sectionHeadingLevel}>
      {children}
    </HeadingContext.Provider>
  );
};

export default Section;