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

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

export const SumInfoItem = ({ label, value = '', isError, errors }: SumInfoItemProps) => {
  return (
    <Group wrap="nowrap" align="flex-start">
      <Typography variant="label-lg" sx={{ width: 48, flexShrink: 0 }}>
        {label}
      </Typography>
      {!isError && (
        <Typography variant="body-lg" sx={{ wordBreak: 'break-word' }}>
          {value}
        </Typography>
      )}
      {isError && (
        <Typography variant="body-lg" c="red">
          {errors ?? `Invalid ${label}`}
        </Typography>
      )}
    </Group>
  )
}