import { Box, BoxProps, Code, CodeProps } from '@tidbcloud/uikit'
import { mergeSxList } from '@tidbcloud/uikit/utils'

interface ModalCodeTitleProps {
  wrapperProps?: BoxProps
  maxWidth?: React.CSSProperties['maxWidth']
  codeProps?: CodeProps
}

export const ModalCodeTitle = ({
  maxWidth = 256,
  children,
  wrapperProps,
  codeProps
}: React.PropsWithChildren<ModalCodeTitleProps>) => {
  const { sx, ...rest } = wrapperProps ?? {}
  return (
    <Box
      component="span"
      sx={mergeSxList([
        (theme) => {
          const { carbon } = theme.colors
          return {
            background: carbon[3],
            border: `1px solid ${carbon[5]}`,
            borderRadius: 4,
            padding: 4,
            maxWidth: maxWidth,
            display: 'inline-flex',
            alignItems: 'center'
          }
        },
        sx
      ])}
      {...rest}
    >
      <Code
        sx={{
          fontSize: 'inherit',
          lineHeight: '20px',
          color: 'inherit',
          background: 'transparent',
          padding: 0,
          flex: 1,
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis'
        }}
        {...codeProps}
      >
        {children}
      </Code>
    </Box>
  )
}