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

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

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