import { ArrowRight } from "lucide-react";
import type { ComponentProps, ReactNode } from "react";

import { buttonVariants } from "@/components/ui/button";
import { Link } from "@/i18n/navigation";
import { cn } from "@/lib/utils";

/**
 * Either a locale-aware route resolved by the next-intl `Link`, or a same-page
 * anchor. The anchor is rendered as a plain `<a>`: the next-intl `Link` would
 * prefix the active locale and turn `#topics` into a navigation to `/en`.
 */
type ArrowLinkTarget = { href: ComponentProps<typeof Link>["href"] } | { hash: string };

type ArrowLinkProps = ArrowLinkTarget & {
  children: ReactNode;
  className?: string;
};

/**
 * The Label-Caps text link that closes a section — "Discover our story", with a
 * trailing arrow that slides on hover.
 *
 * Replaces seven hand-rolled copies of the same block, each ending in a literal
 * rightwards-arrow character. That glyph was text: it inherited the label's
 * weight, was announced by some screen readers, and rendered from whatever font
 * the platform happened to pick. A lucide `ArrowRight` is a decorative SVG.
 *
 * Typography, hover and the focus ring are NOT redefined here: they come from
 * `buttonVariants({ variant: "link-arrow" })`, so this link and every CTA share
 * one source of truth (ADVMF-45). `cn()` is mandatory around `buttonVariants` —
 * the `cta*` chrome neutralises the shadcn base by relying on tailwind-merge.
 *
 * The arrow slides on hover only under `motion-safe`, and hooks onto the named
 * `group/button` that the variant already declares.
 */
export default function ArrowLink(props: ArrowLinkProps) {
  const className = cn(
    buttonVariants({ variant: "link-arrow", size: "cta-link" }),
    props.className,
  );

  const content = (
    <>
      {props.children}
      <ArrowRight
        aria-hidden="true"
        className="size-4 transition-transform motion-safe:group-hover/button:translate-x-1.5"
      />
    </>
  );

  if ("hash" in props) {
    return (
      <a href={props.hash} className={className}>
        {content}
      </a>
    );
  }

  return (
    <Link href={props.href} className={className}>
      {content}
    </Link>
  );
}