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

interface CostsItemProps extends FlexProps {
  label: React.ReactNode
  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"
          sx={{ p: { fontWeight: 700, lineHeight: '30px', fontSize: 20 } }}
        >
          {value}
        </Typography>
      </Skeleton>
    </Flex>
  )
}