import Link from "next/link";
import type { ReactNode } from "react";
import { ArrowIcon } from "@/components/ArrowIcon";

type Tone = "mauve" | "plum" | "white";
type Size = "sm" | "base";

const tones: Record<Tone, string> = {
  mauve: "text-anouma-mauve-dark",
  plum: "text-anouma-plum",
  white: "text-white",
};

const sizes: Record<Size, string> = {
  sm: "gap-1.5 text-sm",
  base: "gap-2 text-base",
};

type ArrowLinkProps = {
  href: string;
  children: ReactNode;
  tone?: Tone;
  size?: Size;
  className?: string;
};

/**
 * The site's one secondary-action pattern: a text link with a small arrow
 * that nudges forward on hover. Used instead of a pill button wherever the
 * action isn't the single primary one on screen - keeps most CTAs feeling
 * like an invitation to read on rather than another button to click.
 */
export function ArrowLink({ href, children, tone = "mauve", size = "sm", className = "" }: ArrowLinkProps) {
  return (
    <Link
      href={href}
      className={`group inline-flex items-center font-medium ${tones[tone]} ${sizes[size]} ${className}`}
    >
      {children}
      <ArrowIcon />
    </Link>
  );
}