import type { ReactElement } from "react";
import { requireMetaURL } from "../misc/MetaContext.js";
import { getClass } from "../util/css.js";
import type { OptionalChildProps } from "../util/props.js";
import CENTERED_LAYOUT_CSS from "./CenteredLayout.module.css";
import { LAYOUT_CLASS } from "./Layout.js";

export interface CenteredLayoutProps extends OptionalChildProps {
	fullWidth?: boolean;
}

/**
 * Layout that puts the content in the center of the screen with no header/footer and a narrow max-width.
 * - Used for e.g. login/register/error/form pages where the content is the only focus.
 */
export function CenteredLayout({ children, fullWidth = false }: CenteredLayoutProps): ReactElement {
	const { path } = requireMetaURL();
	return (
		<main key={path} className={getClass(CENTERED_LAYOUT_CSS.main, LAYOUT_CLASS)}>
			<div className={CENTERED_LAYOUT_CSS.mainInner} style={fullWidth ? { maxWidth: "none" } : undefined}>
				{children}
			</div>
		</main>
	);
}