import { useContext } from 'react'
import PropTypes from 'prop-types'
import { Typography } from 'antd'
import { ElectronContext } from '../context/ElectronContext'

const { Link } = Typography

const ExternalLink = ({ href, children, onClick, ...props }) => {
  const { isElectron, openExternalUrl } = useContext(ElectronContext)

  const handleClick = (event) => {
    onClick?.(event)
    if (event.defaultPrevented) return

    if (isElectron) {
      event.preventDefault()
      openExternalUrl(href)
    }
  }

  return (
    <Link
      {...props}
      href={href}
      target={isElectron ? undefined : '_blank'}
      rel={isElectron ? undefined : 'noopener noreferrer'}
      onClick={handleClick}
    >
      {children}
    </Link>
  )
}

ExternalLink.propTypes = {
  href: PropTypes.string.isRequired,
  children: PropTypes.node,
  onClick: PropTypes.func
}

export default ExternalLink