import type { SystemHealthStatus } from "../../../types/types";
import Badge from "../../../ui/Badge";
import { useGetSystemHealth } from "../hooks/useGetSystemHealth";

const SystemHealth = () => {
  const { query } = useGetSystemHealth();

  const startTime = query?.data?.StartTimeHumane;
  const uptime = query?.data?.UptimeHumane;
  const statuses = query?.data?.Status;

  return (
    <div className="h-100 md:h-70">
      <div className="p-2 border-b border-gray-600 grid grid-cols-2 justify-between">
        <div>
          <h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
        </div>
        <div>
          <h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{uptime}</span>
        </div>
      </div>

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

export default SystemHealth;