import React, {type ReactNode} from "react";
import clsx from "clsx";

type ContentBackgroundProps = React.HTMLAttributes<HTMLDivElement> & {
    /** Content to render inside the container */
    children: ReactNode;
};

/**
 * Background for the content area of a page
 * @param children Children the page, i.e., header and body
 * @param className Optional additional styles
 * @param props all other props by html div that might be needed
 * @see ContentBody.tsx
 * @constructor
 */
export default function ContentBackground({children, className, ...props}: ContentBackgroundProps) {
    return (
        <div
            {...props}
            className={clsx(
                "bg-gray-100 w-full min-h-screen max-w-6xl shadow-xl p-8",
                className
            )}
        >
            {children}
        </div>
    );
}