import { getEpcColorClass } from "@/app/utils";

export default function EpcCard({
  epcRating,
  fullMargin = true,
  expected = false,
  kwh = null,
  carbon = null,
  sap = null,
}: {
  epcRating: string;
  fullMargin: boolean;
  expected?: boolean;
  kwh?: number | null;
  carbon?: number | null;
  sap?: string | null;
}) {
  let marginClass = "";
  if (fullMargin) {
    marginClass = "mx-auto";
  }

  let title;
  if (expected) {
    title = "Expected Energy Rating";
  } else {
    title = "Energy Rating";
  }

  const bgColour = getEpcColorClass(epcRating);

  return (
    <div
      className={
        "flex flex-col items-center p-4 shadow rounded-md max-w-xl justify-start text-gray-100 " +
        bgColour
      }
    >
      <div className="text-xl font-bold mb-4 text-center">{title}</div>

      {/* EPC Rating and SAP Rating */}
      <div className="flex items-baseline justify-center">
        {/* EPC Rating */}
        <div className="text-6xl font-bold">{epcRating}</div>

        {/* SAP Rating (only if sap is provided) */}
        {sap !== null && (
          <div className="text-lg font-medium ml-2 text-gray-100">{sap}</div>
        )}
      </div>

      {(kwh || carbon) && (
        <table className="mt-6">
          <tbody>
            {kwh && (
              <tr>
                <td className="text-gray-50">{kwh.toFixed(0)} kWh</td>
              </tr>
            )}
            {carbon && (
              <tr>
                <td className="text-gray-50 py-2">
                  {carbon}t CO<sub>2</sub>
                </td>
              </tr>
            )}
          </tbody>
        </table>
      )}
    </div>
  );
}
