import React, { HTMLAttributes } from 'react';
import cx from 'classnames';

interface Props extends HTMLAttributes<HTMLDivElement> {
  paddingSize: 'xs' | 'sm' | 'md' | 'lg';
  type: 'small' | 'default' | 'float' | 'modal';
}

export function Box({ className, type, paddingSize, children, ...rest }: Props) {
  const classes = cx('box', `padding-${paddingSize}`, type, className);

  return (
    <div className={classes} {...rest}>
      {children}
    </div>
  );
}

Box.defaultProps = {};
