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

type BasicTableInfoProps = {
  datas: BasicInfoData[];
  className?: string;
  style?: React.CSSProperties;
  labelWidth: number;
};

export default function BasicTableInfo({
  datas,
  className,
  style,
  labelWidth,
}: BasicTableInfoProps) {
  const remainder = datas.length % 4;
  const array = [];
  if (remainder > 0) {
    for (let i = 0; i < 4 - remainder; i++) {
      array.push({
        label: '',
        value: '',
      });
    }
  }
  const showDatas = [...datas, ...array];

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