import { JSX } from "react";
import { Heading, Flex, Text, VStack } from "@chakra-ui/react";
import { CombinedError } from "urql";
import SingleStatComponent from "@/components/stats/SingleStat";

interface StatsListProps {
  title: string;
  loading: boolean;
  error: CombinedError | undefined;
  groups?: number;
  links: number;
  commands: number;
  triggers: number;
}

const StatsList = ({
  title,
  loading,
  error,
  groups,
  commands,
  links,
  triggers
}: StatsListProps): JSX.Element => {
  return (
    <VStack gap={6} w="100%">
      <VStack gap={1}>
        <Heading as="h3" fontSize="3xl">
          {title}
        </Heading>
        <Text textAlign="center" fontSize="sm" color="whiteAlpha.800">
          {groups !== undefined
            ? groups >= 0
              ? "Updates every 24 hours"
              : ""
            : "At time of page load"}
        </Text>
      </VStack>
      <Flex w="80%" flexDirection={{ base: "column", md: "row" }} gap={4}>
        {groups !== undefined ? (
          groups >= 0 ? (
            <SingleStatComponent
              loading={loading}
              title="Groups Bot Helped"
              error={error}
              stat={groups}
            />
          ) : null
        ) : null}
        <SingleStatComponent
          loading={loading}
          title="Links Deleted"
          error={error}
          stat={links}
        />
        <SingleStatComponent
          loading={loading}
          title="Commands Responded To"
          error={error}
          stat={commands}
        />
        <SingleStatComponent
          loading={loading}
          title="Times Triggered"
          error={error}
          stat={triggers}
        />
      </Flex>
    </VStack>
  );
};

export default StatsList;