import { faArrowsRotate } from "@fortawesome/free-solid-svg-icons";
import Card from "../../../ui/Card";
import CardHeader from "../../../ui/CardHeader";
import { useGetSystemHealth } from "../hooks/useGetSystemHealth";
import SystemHealth from "./SystemHealth";

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

  const startTime = query?.data?.StartTimeHumane;
  const uptime = query?.data?.UptimeHumane;
  const statuses = query?.data?.Status;
  const isLoading = query?.isLoading;
  return (
    <Card className="p-4">
      <CardHeader title="System Health" refetch={query?.refetch} icon={faArrowsRotate} />
      <SystemHealth startTime={startTime} uptime={uptime} statuses={statuses} isLoading={isLoading} />
    </Card>
  );
};

export default SystemOverview;
