import React from 'react'
import PropTypes from 'prop-types';

import { Padder } from './Padder'

export const Box = ({ children, width, height }) => {

    const boxWidth = width ? width : '100%'
    const boxHeight = height ? height : 'inherit'

    return (
        <div style={{ borderRadius: 25, border: '1px solid #DCDCDC', backgroundColor: '#fff', marginBottom: '1.5em', width: boxWidth, height: boxHeight, boxShadow: '0px 1px 4px rgba(0, 0, 0, .08)' }}>
            <Padder top="1.5em" bottom="1.5em" left="2em" right="2em">
                {children}
            </Padder>
        </div>
    );
}

Box.propTypes = {
    width: PropTypes.number,
    height: PropTypes.number
};