import clsx from 'clsx'
import { type ReactNode } from 'react'

import {
	bgStyles,
	contentStyles,
	gridStyles,
	rootStyles
} from './PageLayout.styles'

type PageLayoutProps = {
	className?: string
	children: ReactNode
}

export function PageLayout({ className, children }: PageLayoutProps) {
	return (
		<div className={rootStyles}>
			<div className={clsx(bgStyles, className)}>
				<div className={gridStyles}>
					<div className='col-span-16 col-start-5'>
						<div className={contentStyles}>{children}</div>
					</div>
				</div>
			</div>
		</div>
	)
}
