/* eslint-disable react/jsx-props-no-spreading */

import React from 'react';
import PropTypes from 'prop-types';
import { withTheme } from '../styles';

import Box from '../Box';

const WrapContainerComponent = React.forwardRef((props, ref) => {
  const { children, pyContent, theme } = props;

  return (
    <Box as="section" ref={ref} {...props}>
      <Box
        width={[1]}
        maxWidth={theme.breakpoints.slice(-1).pop()}
        m="0 auto"
        px={theme.space.body.container}
        py={pyContent.map((element) => theme.space[element])}
      >
        {children}
      </Box>
    </Box>
  );
});

WrapContainerComponent.propTypes = {
  bg: PropTypes.string,
  as: PropTypes.string,
  children: PropTypes.node.isRequired,
  theme: PropTypes.objectOf(Object).isRequired,
  pyContent: PropTypes.arrayOf(String),
};

WrapContainerComponent.defaultProps = {
  as: 'section',
  bg: 'wrapperBackground',
  pyContent: ['large', 'large', 'xlarge'],
};

WrapContainerComponent.displayName = 'WrapContainer';

export default withTheme(WrapContainerComponent);