Link

export { default as Link } from "./link.astro"

export type { LinkProps } from "./types.ts"

---
import type { HTMLAttributes } from "astro/types"

import { cn } from "cn"
import { buttonVariants } from "../button/index.ts"
import type { LinkProps } from "./types.ts"

/** Anchor attributes pass through. `href` is required by `LinkProps`. */
type Props = Omit<HTMLAttributes<"a">, "href"> & LinkProps

const {
  class: className,
  "class:list": classList,
  variant,
  size = "lg",
  externalInNewTab = true,
  prefetch = true,
  href: rawHref,
  title,
  target: targetProp,
  rel: relProp,
  ...rest
} = Astro.props

const href = rawHref ?? "#"

const isExternal = href.startsWith("http")
const isHash = href.startsWith("#")
const isMail = href.startsWith("mailto:")
const isTel = href.startsWith("tel:")
const isInternal = !isExternal && !isHash && !isMail && !isTel
const isContact = isMail || isTel

const target =
  targetProp ?? (isExternal && externalInNewTab ? "_blank" : undefined)

const rel =
  relProp ??
  (isExternal
    ? "noopener nofollow"
    : isInternal && prefetch
      ? "prefetch"
      : undefined)

/** Prefix site BASE_URL for root-relative internal paths. */
let parsedUrl = href
if (!isExternal && !isHash && href.startsWith("/")) {
  const basePrefix = (import.meta.env.BASE_URL ?? "/").replace(/\/$/, "")
  parsedUrl = `${basePrefix}${href}`
}

/** Obfuscate mailto/tel hrefs so scrapers don't see them in the markup. */
let dataContact: string | undefined
if (isContact) {
  parsedUrl = "#"
  dataContact = btoa(href)
}
---

<a
  data-slot="button"
  data-size={size}
  data-variant={variant ?? "default"}
  href={parsedUrl}
  title={title || undefined}
  class:list={[
    "link",
    {
      "is-external": isExternal,
      "is-internal": isInternal,
      "is-hash": isHash,
      "is-mail": isMail,
      "is-tel": isTel,
    },
    cn(buttonVariants({ variant, size }), className),
    classList,
  ]}
  data-contact={dataContact}
  target={target}
  rel={rel}
  {...rest}
>
  <slot />
</a>
<script>
  /**
   * One delegated listener for all mail/tel links. Astro already includes this
   * script once per page; delegation avoids attaching a listener to each link
   * and still works if a contact link is added after the initial render.
   */
  document.addEventListener("click", (event) => {
    const link = (event.target as Element | null)?.closest(
      "a.link.is-mail, a.link.is-tel",
    )
    if (!(link instanceof HTMLAnchorElement)) return

    const contactHrefRaw = link.getAttribute("data-contact")
    if (!contactHrefRaw) return

    event.preventDefault()
    window.location.href = atob(contactHrefRaw)
  })
</script>

import type { ButtonVariantProps } from '../button/button-variants.ts'

/**
 * Props for a destination anchor.
 * Standard anchor attributes such as `class`, `target`, `title`, and `rel`
 * are also accepted on the component.
 */
export interface LinkProps extends ButtonVariantProps {
    /**
     * Destination address.
     *
     * A site path stays on this site. An `http` URL opens in a new tab.
     * A `mailto:` or `tel:` value is stored until the visitor clicks.
     */
    href: string
    /**
     * Open an external URL in a new tab.
     *
     * @default true
     */
    externalInNewTab?: boolean
    /**
     * Add `rel="prefetch"` on an internal path.
     *
     * @default true
     */
    prefetch?: boolean
}