import styled from 'styled-components';
import { Box, Flex } from 'UIKit/grid';
import { min } from 'UIKit/mq';
import Header from './Header';

const ContentWrapper = styled(Box)`
  ${min('laptop')} {
    margin: 3px 8px;
  }
  ${min('desktop')} {
    margin: 3px 7%;
  }
  ${min('extra')} {
    margin: 3px 15%;
  }
`;

const Layout = ({ children }) => (
  <Flex flexDirection="column">
    <Header />
    <ContentWrapper>{children}</ContentWrapper>
  </Flex>
);

export default Layout;