/* ═══════════════════════════════════════════════════════════════
   HOME LINK

   Every link on the front page is typed into the admin, so any of
   them can be a route (/retreats), an anchor on this page
   (#connect) or somewhere else entirely. One component decides
   which element that is, so the hero buttons, photo captions and
   pathfinder actions can't disagree about it.
   ═══════════════════════════════════════════════════════════════ */

import type { CSSProperties, ReactNode } from 'react'
import { Link } from 'react-router-dom'

type HomeLinkProps = {
  url: string
  className?: string
  style?: CSSProperties
  children: ReactNode
}

export const isExternal = (url: string) => /^[a-z][a-z0-9+.-]*:/i.test(url)

export default function HomeLink({ url, className, style, children }: HomeLinkProps) {
  if (url.startsWith('/') && !url.startsWith('//')) {
    return (
      <Link to={url} className={className} style={style}>
        {children}
      </Link>
    )
  }

  // mailto: and tel: open an app, not a tab.
  const newTab = isExternal(url) && !/^(mailto|tel):/i.test(url)

  return (
    <a
      href={url}
      className={className}
      style={style}
      {...(newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
    >
      {children}
    </a>
  )
}