import { ExternalLinkIcon } from 'lucide-react'
import type { AnchorHTMLAttributes } from 'react'

type ExternalLinkProps = Omit<
  AnchorHTMLAttributes<HTMLAnchorElement>,
  'href' | 'rel' | 'target'
> & {
  href: string
  skipIcon?: boolean
}

export function ExternalLink({ children, skipIcon, ...props }: ExternalLinkProps) {
  return (
    <a {...props} target="_blank" rel="noopener noreferrer">
      {children}
      {!skipIcon && <ExternalLinkIcon className="inline-block w-3 h-3 ml-1 mb-2" />}
    </a>
  )
}
