/* eslint-disable react/prop-types */
import styled from 'styled-components';
import { Flex } from 'UIKit/grid';
import { min } from 'UIKit/mq';
import Header from './Header';

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

export default function Layout({ children }) {
  return (
    <Flex flexDirection="column">
      <Header />
      <Main>{children}</Main>
    </Flex>
  );
}