interface EnergyEfficiencyImpactCardProps {
  currentEpcRating: string;
  expectedEpcRating: string;
  currentSapPoints: number;
  expectedSapPoints: number;
  totalSapPoints: number;
}

export function EnergyEfficiencyImpactCard({
  currentEpcRating,
  expectedEpcRating,
  currentSapPoints,
  expectedSapPoints,
  totalSapPoints,
}: EnergyEfficiencyImpactCardProps) {
  return (
    <table className="text-left bg-brandblue rounded-md text-gray-100 w-full border-separate border-spacing-0">
      <tbody>
        <tr>
          <td colSpan={2} className="px-4 pt-4 pb-2 font-semibold text-base">
            Energy Efficiency Impact
          </td>
        </tr>

        {/* Divider row */}
        <tr>
          <td colSpan={2}>
            <div className="h-[2px] bg-brandbrown mx-4 rounded-sm" />
          </td>
        </tr>

        <tr>
          <td className="font-semibold px-4 py-2">Current EPC Rating:</td>
          <td className="pr-4 font-bold">
            {currentSapPoints} {currentEpcRating}
          </td>
        </tr>

        <tr>
          <td className="font-semibold px-4 py-2">Expected EPC Rating:</td>
          <td className="pr-4 font-bold">
            {Math.floor(expectedSapPoints)} {expectedEpcRating}
          </td>
        </tr>

        <tr>
          <td className="font-semibold px-4 py-2">Total SAP Points Improvement:</td>
          <td className="pr-4 font-bold">
            {Math.round((totalSapPoints + Number.EPSILON) * 100) / 100}
          </td>
        </tr>
      </tbody>
    </table>
  );
}


interface SecondaryEnergyEfficiencyImpactCardProps {
  TotalCo2Savings: number;
  totalEnergyCostSavings: number;
  totalKwhSavings: number;
}

export function SecondaryEnergyEfficiencyImpactCard({
  TotalCo2Savings,
  totalEnergyCostSavings,
  totalKwhSavings,
}: SecondaryEnergyEfficiencyImpactCardProps) {
  return (
    <table className="text-left bg-brandblue rounded-md text-gray-100 w-full border-separate border-spacing-0">
      <tbody>
        <tr>
          <td colSpan={2} className="px-4 pt-4 pb-2 font-semibold text-base">
            Gains
          </td>
        </tr>

        {/* Divider row */}
        <tr>
          <td colSpan={2}>
            <div className="h-[2px] bg-brandbrown mx-4 rounded-sm" />
          </td>
        </tr>

        <tr>
          <td className="font-semibold px-4 py-2">
            CO<sub>2</sub> Reduction
          </td>
          <td className="pr-4 font-bold">{TotalCo2Savings.toFixed(1)}t</td>
        </tr>

        <tr>
          <td className="font-semibold px-4 py-2">Energy Savings</td>
          <td className="pr-4 font-bold">{totalKwhSavings.toFixed(0)}kWh</td>
        </tr>

        <tr>
          <td className="font-semibold px-4 py-2">Energy Bill Savings</td>
          <td className="pr-4 font-bold">£{Math.round(totalEnergyCostSavings)}</td>
        </tr>
      </tbody>
    </table>
  );
}

