import BasicInfo, { type BasicInfoData, type BasicInfoProps } from '@/components/BasicInfo';
import InfoGroup from '@/components/InfoGroup';
import classNames from 'classnames';
export type { BasicInfoData };

interface ConfigInfoProps extends BasicInfoProps {
  /** 标题 */
  title: string;
  /** 子元素 */
  children?: React.ReactNode;
}

/** 详情基本信息块，目前主要用于主动机器学习、超参数寻优、自主学习详情中 */
function ConfigInfo({
  title,
  datas,
  labelWidth,
  labelAlign = 'start',
  labelEllipsis = true,
  threeColumns = true,
  className,
  style,
  children,
}: ConfigInfoProps) {
  return (
    <InfoGroup title={title} className={classNames('kf-config-info', className)} style={style}>
      <div className={'kf-config-info__content'}>
        <BasicInfo
          datas={datas}
          labelWidth={labelWidth}
          labelAlign={labelAlign}
          labelEllipsis={labelEllipsis}
          threeColumns={threeColumns}
        />
        {children}
      </div>
    </InfoGroup>
  );
}

export default ConfigInfo;
