import { TypographyProps } from '@tidbcloud/uikit'

import { PropertyKV } from 'dbaas/components'

interface SumInfoItemProps {
  label: string
  value?: React.ReactNode
  isError?: boolean
  errors?: React.ReactNode
  labelProps?: TypographyProps
}

export const SumInfoItem = ({ label, value = '', isError, errors, labelProps = {} }: SumInfoItemProps) => {
  return (
    <PropertyKV
      label={label}
      labelProps={{
        w: 64,
        ...labelProps
      }}
      valueProps={{ c: isError ? 'red' : 'carbon.8' }}
    >
      {isError ? (errors ?? `Invalid ${label}`) : value}
    </PropertyKV>
  )
}