import type { SystemHealthStatus } from "../../../../../types/types";
import Badge from "../../../../../ui/Badge";
import ModalComponent from "../../../../../ui/ModalComponent";
import StatusIndicators from "../../../../../ui/StatusIndicators";
import { capitalize } from "../../../../../utils/utils";

type SystemHealthModalProps = {
  isSystemHealthModalOpen: boolean;
  handleClose: () => void;
  statusCategory: SystemHealthStatus[];
  title: string;
  isAllGood: boolean;
};

const SystemHealthModal = ({
  isSystemHealthModalOpen,
  handleClose,
  statusCategory,
  title,
  isAllGood,
}: SystemHealthModalProps) => {
  return (
    <ModalComponent isModalOpen={isSystemHealthModalOpen} close={handleClose}>
      <div>
        <div className="border-b border-gray-500">
          <h2 className="text-xl font-bold mb-4 flex flex-row items-center">
            {isAllGood ? <StatusIndicators status={"bg-green-500"} /> : <StatusIndicators status={"bg-amber-500"} />}
            {capitalize(title)}
          </h2>
          <p className="text-sm text-slate-300">{isAllGood ? "All systems running" : "Some systems down"}</p>
        </div>

        <div>
          {statusCategory?.map((status: SystemHealthStatus) => (
            <div
              className="border border-gray-700 p-4 rounded-md m-2 flex justify-between hover:bg-[#233241]"
              key={status.id}
            >
              <span>{status.id}</span> <Badge text={status.tags[0]} />
            </div>
          ))}
        </div>
      </div>
    </ModalComponent>
  );
};

export default SystemHealthModal;