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

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

const CameraStatusGridItem = ({ title, statusCategory }: CameraStatusGridItemProps) => {
  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 m-2 h-70"
        onClick={() => setIsOpen(true)}
      >
        <h3 className="text-lg flex flex-row items-center">{capitalize(title)}</h3>
        <p className="text-sm text-slate-300">{isAllGood ? "Click to view module status" : "Some systems down"}</p>
      </div>
      <SystemHealthModal
        isSystemHealthModalOpen={isOpen}
        handleClose={handleClick}
        statusCategory={statusCategory}
        title={title}
        isAllGood={isAllGood}
      />
    </>
  );
};

export default CameraStatusGridItem;