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

interface PropertyKVProps extends GroupProps {
  label: React.ReactNode
  labelProps?: TypographyProps
  valueProps?: TypographyProps
}

export const PropertyKV = ({ labelProps = {}, valueProps = {}, label, children, ...restProps }: PropertyKVProps) => {
  return (
    <Group wrap="nowrap" align="flex-start" {...restProps}>
      <Typography variant="label-lg" component="div" w={80} sx={{ flexShrink: 0 }} {...labelProps}>
        {label}
      </Typography>
      <Typography variant="body-lg" component="div" sx={{ wordBreak: 'break-word' }} {...valueProps}>
        {children ?? ''}
      </Typography>
    </Group>
  )
}