import { useState } from "react";
import type { SystemHealthStatus } from "../../../../types/types";
import StatusIndicators from "../../../../ui/StatusIndicators";
import { capitalize } from "../../../../utils/utils";
import SystemHealthModal from "../systemHealthModal/SystemHealthModal";

type StatusGridItemProps = {
  title: string;
  statusCategory: SystemHealthStatus[];
};

const StatusGridItem = ({ title, statusCategory }: StatusGridItemProps) => {
  const [isOpen, setIsOpen] = useState(false);
  const isAllGood = statusCategory.every((status) => status.tags.includes("RUNNING"));

  const handleClick = () => {
    setIsOpen(false);
  };

  return (
    <>
      <div
        className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241] hover:cursor-pointer"
        onClick={() => setIsOpen(true)}
      >
        <h3 className="text-lg flex flex-row items-center">
          {isAllGood ? <StatusIndicators status={"bg-green-500"} /> : <StatusIndicators status={"bg-amber-500"} />}
          {capitalize(title)}
        </h3>
        <p className="text-sm text-slate-300">{isAllGood ? "All systems running" : "Some systems down"}</p>
      </div>
      <SystemHealthModal
        isSystemHealthModalOpen={isOpen}
        handleClose={handleClick}
        statusCategory={statusCategory}
        title={title}
        isAllGood={isAllGood}
      />
    </>
  );
};

export default StatusGridItem;