"use client"

import * as React from "react"
import { ExternalLink as ExternalLinkIcon } from "lucide-react"

import { cn } from "../../lib/utils"

/**
 * `ExternalLink` is the replacement for `@wordpress/components`' `ExternalLink` - **1 import** in
 * `QuestionnairePreview`.
 *
 * AN ADAPTER, NOT A RENAME, BECAUSE OF WHAT WORDPRESS ADDS TO A BARE `<a>`: `target="_blank"` with
 * `rel="external noreferrer noopener"`, the arrow glyph, and the hidden "(opens in a new tab)" text.
 * The `rel` is the part that matters and the part that gets forgotten - `noopener` is what stops the
 * opened tab reaching back into this one through `window.opener`.
 *
 * The arrow is `aria-hidden` and the warning is `sr-only`, so a screen reader hears the link text
 * once and then the warning, which is WP's arrangement.
 *
 * `forwardRef` IS LOAD-BEARING, NOT HOUSE STYLE. The one call site wraps this in a `ui/tooltip`,
 * whose Radix trigger uses `asChild` and hands the ref down to position against. On React 18 a plain
 * function component cannot receive one, so the tooltip would warn and float in the wrong place.
 */

const ExternalLink = React.forwardRef<HTMLAnchorElement, React.ComponentProps<"a">>(
  ({ className, children, ...props }, ref) => (
    <a
      ref={ref}
      data-slot="external-link"
      target="_blank"
      rel="external noreferrer noopener"
      className={cn(
        "text-primary inline-flex items-center gap-1 underline-offset-4 hover:underline",
        className
      )}
      {...props}
    >
      {children}
      <ExternalLinkIcon aria-hidden="true" className="size-3.5 shrink-0" />
      <span className="sr-only">(opens in a new tab)</span>
    </a>
  )
)
ExternalLink.displayName = "ExternalLink"

export { ExternalLink }