/* eslint-disable no-underscore-dangle */

import styled from 'styled-components';
import {
  background,
  border,
  color,
  compose,
  flexbox,
  grid,
  layout,
  position,
  shadow,
  space,
  typography,
} from 'styled-system';

import css from '@styled-system/css';
import shouldForwardProp from '@styled-system/should-forward-prop';

import withTheme from '../styles/withTheme';

const sx = (props) => css(props.sx)(props.theme);
const base = (props) => css(props.__css)(props.theme);

const BoxComponent = styled('div', {
  shouldForwardProp,
})(
  {
    boxSizing: 'border-box',
    margin: 0,
    minWidth: 0,
  },
  base,
  sx,
  (props) => props.css,
  compose(
    background,
    border,
    color,
    flexbox,
    grid,
    layout,
    position,
    shadow,
    space,
    typography,
  ),
);

BoxComponent.displayName = 'Box';

export default withTheme(BoxComponent);