import classNames from 'classnames';
import InfoGroupTitle from './InfoGroupTitle';
import './index.less';

type InfoGroupProps = {
  /** 标题 */
  title: string;
  /** 高度, 如果要纵向滚动，需要设置高度 */
  height?: string | number;
  /** 宽度, 如果要横向滚动，需要设置宽度 */
  width?: string | number;
  /** 自定义类名 */
  className?: string;
  /** 自定义样式 */
  style?: React.CSSProperties;
  /** 子元素 */
  children?: React.ReactNode;
};

/**
 * 信息组，用于展示基本信息，支持横向、纵向滚动。自动机器学习、超参数寻优都是使用这个组件
 */
function InfoGroup({ title, height, width, className, style, children }: InfoGroupProps) {
  const contentStyle: React.CSSProperties = {};
  if (height) {
    contentStyle.height = height;
    contentStyle.overflowY = 'auto';
  }
  if (width) {
    contentStyle.width = width;
    contentStyle.overflowX = 'auto';
  }
  return (
    <div className={classNames('kf-info-group', className)} style={style}>
      <InfoGroupTitle title={title} />
      <div style={contentStyle} className={'kf-info-group__content'}>
        {children}
      </div>
    </div>
  );
}

export default InfoGroup;
