"use client";

import GetTotalGroupsQuery from "@/graphql/queries/getTotalGroups";
import { Heading, Skeleton, Text } from "@chakra-ui/react";
import { Icon } from "@iconify/react";
import { useQuery } from "@urql/next";
import { Fragment } from "react/jsx-runtime";


export default function Home() {
  const [{ fetching, data, error }] = useQuery({ query: GetTotalGroupsQuery });

  return (
    <Fragment>
      <Heading>{`Total number of groups the bot has helped`}</Heading>
      <Skeleton loading={fetching} width="2rem">
        <Text fontSize="2xl">
          {error || !data || !data.getTotalGroups ? (
            <Icon
              color="yellow"
              icon="solar:danger-triangle-broken"
              width="24"
              height="24"
            />
          ) : (
            `${data.getTotalGroups}`
          )}
        </Text>
      </Skeleton>
    </Fragment>
  );
}
