/**
 * 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={"mt-20 max-w-7xl px-5 pb-10 text-gray-800 " + className}
        >
            {children}
        </div>
    )
}

export default Content