import BasicInfo, { type BasicInfoData } from '@/components/BasicInfo';
import classNames from 'classnames';
import { useEffect } from 'react';
import ConfigTitle from '../ConfigTitle';
import styles from './index.less';
export * from '@/components/BasicInfo/format';
export type { BasicInfoData };

type ConfigInfoProps = {
  title: string;
  data: BasicInfoData[];
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
  labelWidth: number;
  threeColumn?: boolean;
};

function ConfigInfo({
  title,
  data,
  className,
  style,
  children,
  labelWidth,
  threeColumn = false,
}: ConfigInfoProps) {
  useEffect(() => {}, []);

  return (
    <div
      className={classNames(
        styles['config-info'],
        { [styles['config-info--three-column']]: threeColumn },
        className,
      )}
      style={style}
    >
      <ConfigTitle title={title} />
      <div className={styles['config-info__content']}>
        <BasicInfo datas={data} labelWidth={labelWidth} />
        {children}
      </div>
    </div>
  );
}

export default ConfigInfo;
