import { Box } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { Outlet } from 'react-router-dom';
import { boxClasses } from 'styles';

export function MainLayout() {
	const { theme } = useCommonHooks();
	return (
		<Box
			className={boxClasses.layoutContainer}
			style={{
				'--image-background':
					theme.backgroundImage === 'none'
						? undefined
						: `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), url(../../api/backgroundImages/${theme.backgroundImage})`,
			}}
		>
			<Outlet />
		</Box>
	);
}