import { Box, Center, Flex, Image, Text } from '@chakra-ui/react';
import React from 'react';
import { LOGO_URL } from '../constants';

export function AuthLayout({ children }: { children: React.ReactNode }) {
	return (
		<Flex flexWrap="wrap" h="100%">
			<Center h="100%" flex="2" bg="blue.500" flexDirection="column">
				<Image src={LOGO_URL} alt="" />

				<Text
					color="white"
					casing="uppercase"
					fontSize="3xl"
					mt="2"
					letterSpacing="2.25px"
				>
					Authorizer
				</Text>
			</Center>
			<Center h="100%" flex="2">
				{children}
			</Center>
		</Flex>
	);
}