import React from "react";
import {
  GreenTickIcon,
  PerformanceIcon,
  TickIcon,
} from "../../../icons/ExportCommonIcons";

const PerformanceResult = ({ comparedProducts }: any) => {
  const ProfitProduct = comparedProducts[0].simulationData.netProfit > comparedProducts[1].simulationData.netProfit ? comparedProducts[0] : comparedProducts[1];
  return (
    <div className="performanceResult-wrapper comparisionCard">
      <div className="header">
        <div className="icon">
          <PerformanceIcon />
        </div>
        <h4 className="head">Performance result</h4>
      </div>

      <div className="metrics-container">
        <div className="metrics-left">
          <div className="metric">
            <div className="metric-label">
              Success rate{" "}
              <span>
                <GreenTickIcon />
              </span>
            </div>
            <div className="metric-value">98%</div>
          </div>
          <div className="label">Net Profit</div>
        </div>

        <div className="metrics-right">
          <div className="metric-wrapper">
            <div className="metric-label">ROI Percentage</div>
            <div className="metric">
              <div className="metric-icon"></div>
              <div className="metric-value">{ProfitProduct.simulationData.roiPercentage.toFixed(2)}</div>
            </div>
          </div>

          <div className="metric-wrapper">
            <div className="metric-label">Payback Period</div>
            <div className="metric">
              <div className="metric-icon"></div>
              <div className="metric-value">{ProfitProduct.simulationData.netProfit}</div>
            </div>
          </div>

          <div className="metric-wrapper">
            <div className="metric">
              <div className="metric-icon"></div>
              <div className="metric-value">{parseFloat(ProfitProduct.simulationData.paybackPeriod.toFixed(2))}years</div>
            </div>
          </div>
        </div>
      </div>

      <div className="simulation-tag">{ProfitProduct.productName}</div>
    </div>
  );
};

export default PerformanceResult;
