import { cn } from '../../utils'
import { TextLink } from '../Link'
import { Typography } from '../Typography'

export interface HexAddressProps {
  children: string
  href?: string
  className?: string
}

export const HexAddress = ({ children, href, className }: HexAddressProps) => {
  if (!href) {
    return (
      <Typography variant="body-s" className={cn('break-all', className)}>
        {children}
      </Typography>
    )
  }

  return (
    <TextLink
      href={href}
      external
      newTab
      className={cn('break-all text-sm', className)}
    >
      {children}
    </TextLink>
  )
}