import classNames from 'classnames';
import { BasicInfoProps } from '../BasicInfo';
import BasicInfoItem from '../BasicInfo/BasicInfoItem';
import { type BasicInfoData, type BasicInfoLink } from '../BasicInfo/types';
import './index.less';
export type { BasicInfoData, BasicInfoLink };

export type BasicTableInfoProps = Omit<BasicInfoProps, 'labelAlign' | 'threeColumns'>;

/**
 * 表格基础信息展示组件，用于展示基础信息，一行四列，支持数据格式化
 */
export default function BasicTableInfo({
  datas,
  labelWidth,
  labelEllipsis,
  className,
  style,
}: BasicTableInfoProps) {
  const remainder = datas.length % 4;
  const array = [];
  if (remainder > 0) {
    for (let i = 0; i < 4 - remainder; i++) {
      array.push({
        label: '',
        value: false, // 用于区分是否是空数据，不能是空字符串、null、undefined
      });
    }
  }
  const showDatas = [...datas, ...array];

  return (
    <div className={classNames('kf-basic-table-info', className)} style={style}>
      {showDatas.map((item, index) => (
        <BasicInfoItem
          key={`${item.label}-${index}`}
          data={item}
          labelWidth={labelWidth}
          labelEllipsis={labelEllipsis}
          classPrefix="kf-basic-table-info"
        />
      ))}
    </div>
  );
}
