import * as React from 'react';
import { Box, useColorMode } from '@chakra-ui/core';

export const CodeBlock = ({ children }) => {
  const { colorMode } = useColorMode();
  const bg = { dark: 'gray.800', light: 'blackAlpha.100' };
  const color = { dark: 'white', light: 'black' };
  return (
    <Box
      fontFamily="mono"
      mt={5}
      p={3}
      border="1px"
      borderColor="inherit"
      rounded="md"
      bg={bg[colorMode]}
      color={color[colorMode]}
      fontSize="sm"
      whiteSpace="pre-wrap"
      as="pre">
      {children}
    </Box>
  );
};