import { Flex, FlexProps, Skeleton, Typography } from '@tidbcloud/uikit'
import React from 'react'

interface CostsItemProps extends FlexProps {
  label: string
  value: React.ReactNode
  loading?: boolean
}

export const CostsLabel: React.FC<React.PropsWithChildren<CostsItemProps>> = ({
  label,
  value,
  loading = false,
  ...rest
}) => {
  return (
    <Flex direction="column" {...rest}>
      <Typography variant="label-sm" c="carbon.7">
        {label}
      </Typography>
      <Skeleton visible={!!loading}>
        <Typography variant="headline-md" c="carbon.8">
          {value}
        </Typography>
      </Skeleton>
    </Flex>
  )
}