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;
  const isError = query?.isError;
  const dateUpdatedAt = query?.dataUpdatedAt;

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

export default SystemOverview;