import React from 'react'
import _Box from 'ui-box'

export const Box = (props) => {
  const updatedProps = {
    ...props,
    marginBottom: props.mb || props.marginBottom || props.my || props.m,
    marginTop: props.mt || props.marginTop || props.my || props.m,
    marginLeft: props.ml || props.marginLeft || props.mx || props.m,
    marginRight: props.mr || props.marginRight || props.mx || props.m,
    paddingBottom: props.pb || props.paddingBottom || props.py || props.p,
    paddingTop: props.pt || props.paddingTop || props.py || props.p,
    paddingLeft: props.pl || props.paddingLeft || props.px || props.p,
    paddingRight: props.pr || props.paddingRight || props.px || props.p,
    paddingX: props.px || props.p,
    paddingY: props.py || props.p,
    flexDirection: props.direction || props.flexDirection,
    padding: props.p || props.padding,
  }

  return <_Box {...updatedProps} />
}

Box.defaultProps = {
  display: 'flex',
  direction: 'row',
}