Dwinzo_dev/app/src/components/ui/compareVersion/result-card/PerformanceResult.tsx

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

const PerformanceResult = () => {
  return (
    <div className="performanceResult-wrapper comparisionCard">
      <div className="header">
        <div className="icon">
          <PerformanceIcon />
        </div>
        <div className="head">Performance result</div>
      </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">Environmental impact</div>
        </div>

        <div className="metrics-right">
          <div className="metric-wrapper">
            <div className="metric-label">Waste generation</div>
            <div className="metric">
              <div className="metric-icon">I</div>
              <div className="metric-value">0.5%</div>
            </div>
          </div>

          <div className="metric-wrapper">
            <div className="metric-label">Risk 
management</div>
            <div className="metric">
              <div className="metric-icon">I</div>
              <div className="metric-value">0.1%</div>
            </div>
          </div>

          <div className="metric-wrapper">
            <div className="metric">
              <div className="metric-icon">I</div>
              <div className="metric-value">0.5%</div>
            </div>
          </div>
        </div>
      </div>

      <div className="simulation-tag">Simulation 1</div>
    </div>
  );
};

export default PerformanceResult;