import { Code } from '@tidbcloud/uikit'
import type { CSSProperties } from 'react'

const codeStyle = {
  display: 'inline-block',
  maxWidth: '100%',
  overflowWrap: 'anywhere',
  whiteSpace: 'pre-wrap',
  wordBreak: 'break-word'
} as const

const getDisplayValue = (value: unknown) => {
  if (value == null) {
    return '-'
  }

  if (
    typeof value === 'string' ||
    typeof value === 'number' ||
    typeof value === 'boolean'
  ) {
    return String(value)
  }

  return JSON.stringify(value) ?? String(value)
}

const CodeValue = ({
  value,
  style
}: {
  value: unknown
  style?: CSSProperties
}) => {
  return (
    <Code style={{ ...codeStyle, ...style }}>{getDisplayValue(value)}</Code>
  )
}

export default CodeValue