import React, { ReactElement, ReactNode } from 'react';

import { CommonProps, SystemProperties } from '../common';
import { StyledBox } from './StyledBox';
import css from '../../utils/css';

export interface BoxProps extends SystemProperties, CommonProps {
  /**
   * Box's children node.
   */
  children?: ReactNode;
}

const Box = ({
  bgColor,
  borderColor,
  borderRadius,
  borderStyle,
  borderWidth,
  children,
  color,
  fontSize,
  fontWeight,
  lineHeight,
  m,
  mb,
  ml,
  mr,
  mt,
  p,
  pb,
  pl,
  pr,
  pt,
  sx = {},
  className,
  id,
  style,
  'data-test-id': dataTestId,
}: BoxProps): ReactElement => (
  <StyledBox
    themeBgColor={bgColor}
    themeBorderColor={borderColor}
    themeBorderRadius={borderRadius}
    themeBorderStyle={borderStyle}
    themeBorderWidth={borderWidth}
    themeColor={color}
    themeFontSize={fontSize}
    themeFontWeight={fontWeight}
    themeLineHeight={lineHeight}
    themeMargin={m}
    themeMarginBottom={mb}
    themeMarginLeft={ml}
    themeMarginRight={mr}
    themeMarginTop={mt}
    themePadding={p}
    themePaddingBottom={pb}
    themePaddingLeft={pl}
    themePaddingRight={pr}
    themePaddingTop={pt}
    className={className}
    id={id}
    style={{ ...style, ...css(sx) }}
    data-test-id={dataTestId}
  >
    {children}
  </StyledBox>
);

export default Box;