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

interface Props {
    children: React.ReactNode
    className?: string
    style?: React.CSSProperties | undefined
}

/**
 * Centered section for page content
 * @param {Props} props - Section content
 * @returns {JSX.Element} The complete section
 */
const Content = ({
    children,
    className = "",
    style = {},
}: Props): JSX.Element => {
    return (
        <div className={twMerge("mx-auto max-w-4xl pb-10", className)} style={style}>
            {children}
        </div>
    )
}

export default Content