import { JSX } from "react";
import { Skeleton, Stat, FormatNumber } from "@chakra-ui/react";
import { Icon } from "@iconify/react";
import { CombinedError } from "urql";

interface SingleStatComponentProps {
  stat: number;
  title: string;
  loading: boolean;
  error: CombinedError | undefined;
}

const SingleStatComponent = ({
  stat,
  title,
  loading,
  error
}: SingleStatComponentProps): JSX.Element => {
  return (
    <Stat.Root alignItems="center">
      <Stat.Label textAlign="center">{title}</Stat.Label>
      <Stat.ValueText>
        <Skeleton loading={loading} w="auto" minW="2.5rem" textAlign="center">
          {(error || stat === undefined) && !loading ? (
            <Icon
              color="yellow"
              icon="solar:danger-triangle-broken"
              width="24"
              height="24"
            />
          ) : (
            <FormatNumber
              value={stat}
              notation="compact"
              compactDisplay="short"
            />
          )}
        </Skeleton>
      </Stat.ValueText>
    </Stat.Root>
  );
};

export default SingleStatComponent;
