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

interface PropertyItemProps extends GroupProps {
  label: React.ReactNode
}

export const PropertyItem: React.FC<React.PropsWithChildren<PropertyItemProps>> = ({
  label,
  children,
  ...restProps
}) => {
  return (
    <Group wrap="nowrap" align="flex-start" {...restProps}>
      <Typography variant="label-lg" c="carbon.7" sx={{ width: 80, flexShrink: 0 }}>
        {label}
      </Typography>
      <Typography variant="body-lg" sx={{ wordBreak: 'break-all' }}>
        {children}
      </Typography>
    </Group>
  )
}