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

import SystemHealth from "./SystemHealth";
import type { SystemHealthStatus } from "../../../types/types";

type SystemOverviewProps = {
  startTime: string;
  uptime: string;
  statuses: SystemHealthStatus[];
  isLoading: boolean;
  isError: boolean;
  dateUpdatedAt: number;
  refetch: () => void;
};

const SystemOverview = ({
  startTime,
  uptime,
  statuses,
  isLoading,
  isError,
  dateUpdatedAt,
  refetch,
}: SystemOverviewProps) => {
  return (
    <Card className="p-4">
      <CardHeader title="System Health" refetch={refetch} icon={faArrowsRotate} />
      <SystemHealth
        startTime={startTime}
        uptime={uptime}
        statuses={statuses}
        isLoading={isLoading}
        isError={isError}
        dateUpdatedAt={dateUpdatedAt}
      />
    </Card>
  );
};

export default SystemOverview;