import React from 'react';
import styles from './index.less';

interface InfoItemProps {
  label: string;
  value: string;
  style?: React.CSSProperties;
}

const InfoItem: React.FC<InfoItemProps> = ({ label, value, style }) => (
  <div className={styles.infoItem} style={style}>
    <span className={styles.label}>{label}：</span>
    <span className={styles.value}>{value}</span>
  </div>
);

const PipelineAssessmentDetail: React.FC = () => {
  const leftInfoItems = [
    { label: '管廊名称', value: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' },
    { label: '检测评估类别名称', value: 'XXXXXXXXXXXXXXX' },
    { label: '开始日期', value: '2024-12-24' },
    { label: '完成日期', value: '2024-12-24' },
    { label: '主要内容', value: 'XXXXXXXXXXXXXXX' },
    { label: '结果', value: 'XXXXXXXXXXXXXXXXXXXXXXX' },
    { label: '主要问题', value: 'XXXXXXXXXXXXXXX' },
    { label: '维护建议', value: 'XXXXXXXXXXXXXXXXXXXXXXX' },
    { label: '备注', value: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\
      XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\
      XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\
      XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\
      XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\
      XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\
      XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\
      XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\
      XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' },
  ];

  // const rightInfoItems = [
  //   { label: '结束日期', value: '2024-12-24' },
  //   { label: '联系人', value: 'XXXXXXXXXXXXXXX' },
  //   { label: '相对地面位置', value: '2024-12-24' },
  //   { label: '层数', value: 'XXXXXXXXXXXXXXX' },
  //   { label: '建筑面积(平方米)', value: 'XXXXXXXXXXXXXXX' },
  //   { label: '管廊名称', value: 'XXXXXXXXXXXXXXXXXXXXXXX' },
  // ];

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <div className={styles.infoWrapper}>
          <div className={styles.leftInfo}>
            {leftInfoItems.map((item, index) => (
              <InfoItem key={index} {...item} />
            ))}
          </div>
          {/* <div className={styles.rightInfo}>
            {rightInfoItems.map((item, index) => (
              <InfoItem key={index} {...item} />
            ))}
          </div> */}
        </div>
      </div>
    </div>
  );
};

export default PipelineAssessmentDetail; 