pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffd
import { FC, ReactNode } from 'react';
import Heading from '../headings/heading';
import styles from './section.module.scss';

export type SectionVariant = 'dark' | 'light';

export type SectionProps = {
  /**
   * Set additional classnames to the section element.
   */
  className?: string;
  /**
   * The section content.
   */
  content: ReactNode;
  /**
   * The section title.
   */
  title: string;
  /**
   * The section variant.
   */
  variant?: SectionVariant;
  /**
   * Add a border at the bottom of the section. Default: true.
   */
  withBorder?: boolean;
};

/**
 * Section component
 *
 * Render a section element.
 */
const Section: FC<SectionProps> = ({
  className = '',
  content,
  title,
  variant = 'dark',
  withBorder = true,
}) => {
  const borderClass = withBorder ? styles[`wrapper--borders`] : '';
  const variantClass = styles[`wrapper--${variant}`];

  return (
    <section
      className={`${styles.wrapper} ${borderClass} ${variantClass} ${className}`}
    >
      <Heading level={2} className={styles.title}>
        {title}
      </Heading>
      <div className={styles.body}>{content}</div>
    </section>
  );
};

export default Section;