import PropTypes from 'prop-types'
import { Flex, Typography } from 'antd'
import CopyButton from './CopyButton'

const { Text } = Typography

const MiscId = ({ value, showCopy = true }) => {
  if (!value) {
    return <Text type='secondary'>n/a</Text>
  }

  return (
    <Flex
      align={'end'}
      className='miscid'
      style={{ minWidth: '0px', width: '100%' }}
    >
      <Text
        code
        ellipsis
        style={showCopy ? { marginRight: 6, minWidth: '0px' } : undefined}
      >
        {value}
      </Text>

      {showCopy && (
        <CopyButton
          text={value}
          tooltip='Copy ID'
          style={{ marginLeft: 0 }}
          iconStyle={{ fontSize: '14px' }}
        />
      )}
    </Flex>
  )
}

MiscId.propTypes = {
  value: PropTypes.string,
  showCopy: PropTypes.bool
}

export default MiscId