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

export function MainLayout() {
	const { theme } = useCommonHooks();
	return (
		<Box
			style={{
				width: '100%',
				height: '100%',
				position: 'fixed',
				backgroundImage: `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), url(/backgrounds/${theme.backgroundImage})`,
				backgroundSize: 'cover',
				backgroundRepeat: 'no-repeat',
				backgroundPosition: 'center',
				zIndex: -1,
				overflow: 'scroll'
			}}
		>
			<Outlet />
		</Box>
	);
}