import React from 'react';

interface ModalDataRowProps {
  label: string;
  value2023?: number;
  value2024?: number;
  unit?: string;
}

const ModalDataRow: React.FC<ModalDataRowProps> = ({
  label,
  value2023,
  value2024,
  unit
}) => {
  const calculateChange = () => {
    if (!value2023 || !value2024) return 0;
    return ((value2024 - value2023) / value2023) * 100;
  };

  const change = calculateChange();
  const isPositive = change >= 0;

  return (
    <div className="flex justify-between items-center py-3 border-b border-gray-600/30">
      <div className="text-white font-medium">{label}</div>

      <div className="flex items-center space-x-6">
        {/* 2023年数据 */}
        <div className="text-right">
          <div className="text-white/70 text-sm">2023</div>
          <div className="text-white font-medium">
            {value2023 ? value2023.toLocaleString() : '-'} {unit}
          </div>
        </div>

        {/* 2024年数据 */}
        <div className="text-right">
          <div className="text-white/70 text-sm">2024</div>
          <div className="text-white font-medium">
            {value2024 ? value2024.toLocaleString() : '-'} {unit}
          </div>
        </div>

        {/* 变动幅度 */}
        <div className="text-right">
          <div className="text-white/70 text-sm">变动</div>
          <div className={`font-medium ${isPositive ? 'text-green-400' : 'text-red-400'}`}>
            {value2023 && value2024 ? `${isPositive ? '+' : ''}${change.toFixed(2)}%` : '-'}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ModalDataRow;