import type { ReactNode } from 'react'
import { EXTERNAL_LINK_ARROW_PATHS } from './external-link-icon'

export function ExternalLink({ href, children }: { href: string; children: ReactNode }) {
  return <a className="reams-external-link" href={href} target="_blank" rel="noopener noreferrer">
    {children}<span className="reams-external-link-icon" aria-hidden="true">
      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        {EXTERNAL_LINK_ARROW_PATHS.map(d => <path key={d} d={d} />)}
      </svg>
    </span>
  </a>
}