/*
 * SPDX-FileCopyrightText: 2023 Kristóf Marussy
 *
 * SPDX-License-Identifier: MIT
 */

import useBrokenLinks from '@docusaurus/useBrokenLinks';
import type { ReactNode } from 'react';

import styles from './Section.module.css';

export default function Section({
  title,
  id,
  children,
}: {
  title: string;
  id: string;
  children?: ReactNode;
}) {
  // Make sure the section anchors are not reported as broken.
  // See https://docusaurus.io/blog/releases/3.1#broken-anchors-checker and
  // https://github.com/facebook/docusaurus/issues/9721#issuecomment-1882898840
  useBrokenLinks().collectAnchor(id);

  return (
    <section id={id} className={styles.section}>
      <h2 className={styles.section__title}>{title}</h2>
      {children}
    </section>
  );
}

Section.defaultProps = {
  children: undefined,
};