import React from 'react';
import { IDiv, JDatomExtentionSet } from '../../types/interface';
import classNames from 'classnames';
import { JDatomClasses } from '../..';
import { JDColor } from '../../types/enum';
import { bgColorClass } from '../../utils/autoClasses';

export interface IProps extends IDiv, JDatomExtentionSet {
  hover?: boolean;
  padding?: number;
  theme?: JDColor;
}

const JDbox: React.FC<IProps> = ({ children, padding = 1, className, hover, theme, ...prop }) => {
  const Padding = (padding * 0.4) + "rem"

  const classes = classNames('JDbox', className, {
    ...JDatomClasses(prop),
    ...bgColorClass(theme),
    JDhover: hover,
  });

  return <div style={{
    padding: Padding
  }} className={classes}>{children}</div>;
};

export default JDbox;
