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[];
  isError?: boolean;
};

const CameraStatus = ({ title, category, isError }: CameraStatusProps) => {
  const isAllGood = category && category.length > 0 && 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">
          {isError ? (
            <StatusIndicators status={"bg-red-500"} />
          ) : isAllGood ? (
            <StatusIndicators status={"bg-green-500"} />
          ) : (
            <StatusIndicators status={"bg-amber-500"} />
          )}
          {capitalize(title)}
        </h3>
        {isError ? (
          <p className="text-sm text-red-500">Error loading camera health.</p>
        ) : isAllGood ? (
          <p className="text-sm text-green-500">All systems running</p>
        ) : (
          <p className="text-sm text-amber-500">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;