import React from 'react';
import ModalHeader from './ModalHeader';
import ModalDataRow from './ModalDataRow';
import ModalCloseButton from './ModalCloseButton';

interface ModalContentProps {
  data?: any;
  onClose: () => void;
}

const ModalContent: React.FC<ModalContentProps> = ({ data, onClose }) => {
  return (
    <div className="p-6">
      {/* 弹窗头部 */}
      <ModalHeader title="变动幅度" />

      {/* 数据内容 */}
      <div className="mt-6 space-y-4">
        {data && (
          <>
            <ModalDataRow
              label="资产总额"
              value2023={data.assetTotalNet?.[2023]}
              value2024={data.assetTotalNet?.[2024]}
              unit="元"
            />
            <ModalDataRow
              label="资产净额"
              value2023={data.assetTotalNet?.[2023]}
              value2024={data.assetTotalNet?.[2024]}
              unit="元"
            />
            <ModalDataRow
              label="利润总额"
              value2023={data.profitTotalNet?.[2023]}
              value2024={data.profitTotalNet?.[2024]}
              unit="元"
            />
            <ModalDataRow
              label="净利润"
              value2023={data.profitTotalNet?.[2023]}
              value2024={data.profitTotalNet?.[2024]}
              unit="元"
            />
            <ModalDataRow
              label="收入"
              value2023={data.incomeStatement?.[2023]}
              value2024={data.incomeStatement?.[2024]}
              unit="元"
            />
            <ModalDataRow
              label="资产负债率"
              value2023={data.assetLiabilityRatio?.[2023]}
              value2024={data.assetLiabilityRatio?.[2024]}
              unit="%"
            />
          </>
        )}
      </div>

      {/* 关闭按钮 */}
      <div className="mt-8 flex justify-center">
        <ModalCloseButton onClick={onClose} />
      </div>
    </div>
  );
};

export default ModalContent;