import type { SystemHealthStatus } from "../../../types/types";
import Card from "../../../ui/Card";
import StatusIndicators from "../../../ui/StatusIndicators";
import { capitalize } from "../../../utils/utils";
import CameraStatusGridItem from "./CameraStatusGridItem";

type CameraStatusProps = {
  title: string;
  category: SystemHealthStatus[];
};

const CameraStatus = ({ title, category }: CameraStatusProps) => {
  const isAllGood = category?.every((status) => status.tags.includes("RUNNING"));
  // check if some are down
  // check if all are down
  //check if offline
  return (
    <Card className="p-4">
      <div className="border-b border-gray-600">
        <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>
      {category && category?.length <= 0 ? (
        <p className=" text-gray-500">Loading Camera health...</p>
      ) : (
        <div>
          <CameraStatusGridItem title={title} statusCategory={category} />
        </div>
      )}
    </Card>
  );
};

export default CameraStatus;