import { node } from 'prop-types';
import React from 'react';
import { useTheme } from 'emotion-theming';
import Box from '../Box';

const Container = ({ children, ...rest }) => {
  const theme = useTheme();
  return (
    <Box
      width={1}
      maxWidth={theme.components.Container.width}
      px={theme.components.Container.padding}
      mx="auto"
      {...rest}
    >
      {children}
    </Box>
  );
};

Container.propTypes = {
  children: node.isRequired,
};

export default Container;