import Header from './header';
import Sidebar from './sidebar';
import { Flex, useColorModeValue, Box } from '@chakra-ui/core';

export default function Dashboard({ children }) {
  const bgColor = useColorModeValue('white', 'gray.800');

  return (
    <>
      <Header />
      <Sidebar display={['none', null, 'flex']} w={64} />

      <Flex as="main" ml={[0, 0, 64]} bg={bgColor}>
        <Flex direction="column" w="full">
          <Box
            w="full"
            as="section"
            px={[4, 6, 8]}
            py={4}
            mt={16}
            h="calc(100vh - 4rem)"
          >
            {children}
          </Box>
        </Flex>
      </Flex>
    </>
  );
}