import { Group, Skeleton, Stack, Title, Typography } from '@tidbcloud/uikit'

type StatisticProps = {
  label: string
  value?: number
  unit?: string
  loading?: boolean
}

export const Statistic: React.FC<React.PropsWithChildren<StatisticProps>> = ({
  label,
  value,
  unit = '',
  loading = false
}) => {
  return (
    <Stack gap={8}>
      <Typography variant="label-md" fw="normal" color="carbon.7">
        {label}
      </Typography>
      <Group align="baseline" gap={8}>
        {loading ? (
          <Skeleton width={100} height={44} />
        ) : (
          <>
            <Title>{value ?? 'N/A'}</Title>
            {value !== undefined && (
              <Typography variant="label-md" fw="normal" color="carbon.7">
                {unit}
              </Typography>
            )}
          </>
        )}
      </Group>
    </Stack>
  )
}