import {
  minWidth,
  MinWidthProps,
  MaxWidthProps,
  width,
  WidthProps,
  height,
  HeightProps,
  space,
  SpaceProps,
  textAlign,
  TextAlignProps,
  color,
  border,
  borderColor,
  borderWidth,
  borderRadius,
  borderStyle,
  ColorProps,
  BorderProps,
  BorderColorProps,
  BorderWidthProps,
  BorderRadiusProps,
  boxShadow,
  BoxShadowProps,
  BorderRightProps,
  borderRight
} from 'styled-system';
import { styled } from '../../styles';
import { MaxWidthScale } from '../../styles/utils';
import { StyledProps } from '../../styles/themeTypes';

export type BoxProps = StyledProps<any> &
  MinWidthProps &
  MaxWidthProps &
  WidthProps &
  HeightProps &
  SpaceProps &
  ColorProps &
  BorderProps &
  BorderColorProps &
  BorderWidthProps &
  BorderRadiusProps &
  BorderRightProps &
  TextAlignProps &
  BoxShadowProps;

export const Box = styled.div<BoxProps>(
  minWidth,
  MaxWidthScale,
  width,
  height,
  textAlign,
  space,
  border,
  borderRight,
  borderWidth,
  borderColor,
  borderRadius,
  borderStyle,
  color,
  boxShadow,
  {
    boxSizing: 'border-box'
  }
);
