/**
 * Format a Section in the page, add margin left & right
 */
import React from "react";
import { PageProps } from "gatsby";

interface Props {
  children: React.ReactNode;
  className?: string;
}

/**
 * Centered section for page content
 * @param {Props} props - Section content
 * @returns {JSX.Element} The complete section
 */
const Content = ({ children, className = "" }: Props): JSX.Element => {
  return (
    <div
      className={
        "max-w-7xl mt-20 px-5 text-gray-800 pb-10 " + className
      }
    >
      {children}
    </div>
  );
};

export default Content;