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

export type BasicInfoProps = {
  /** 基础信息 */
  datas: BasicInfoData[];
  /** 标题宽度 */
  labelWidth: number;
  /** 标题是否显示省略号 */
  labelEllipsis?: boolean;
  /** 是否一行三列 */
  threeColumns?: boolean;
  /** 标签对齐方式 */
  labelAlign?: 'start' | 'end' | 'justify';
  /** 自定义类名 */
  className?: string;
  /** 自定义样式 */
  style?: React.CSSProperties;
};

/**
 * 基础信息展示组件，用于展示基础信息，支持一行两列或一行三列，支持数据格式化
 */
export default function BasicInfo({
  datas,
  labelWidth,
  labelEllipsis = true,
  labelAlign = 'start',
  threeColumns = false,
  className,
  style,
}: BasicInfoProps) {
  return (
    <div
      className={classNames(
        'kf-basic-info',
        { 'kf-basic-info--three-columns': threeColumns },
        className,
      )}
      style={style}
    >
      {datas.map((item) => (
        <BasicInfoItem
          key={item.label}
          data={item}
          labelWidth={labelWidth}
          classPrefix="kf-basic-info"
          labelEllipsis={labelEllipsis}
          labelAlign={labelAlign}
        />
      ))}
    </div>
  );
}
