Arrow Button

import type { AnchorHTMLAttributes, ReactNode } from "react";
import { ArrowUpRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ArrowButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
  children?: ReactNode;
  tone?: "primary" | "cream" | "clay";
}

const TONE = {
  primary: ["bg-da-primary text-da-primary-fg", "bg-da-primary-fg text-da-primary"],
  cream: ["bg-da-surface text-da-surface-fg shadow-da-sm", "bg-da-primary text-da-primary-fg"],
  clay: ["bg-da-secondary text-da-secondary-fg", "bg-da-secondary-fg text-da-secondary"],
} as const;

/** Link-button with a round arrow badge at its end: on hover the badge grows and the arrow turns from ↗ to →, a signature call-to-action for the DA. */
export function ArrowButton({ children = "Explore the platform", tone = "primary", className, href = "#", ...rest }: ArrowButtonProps) {
  return (
    <a
      href={href}
      className={cn("group da-focus da-transition inline-flex h-12 items-center gap-3 rounded-da-pill pr-1.5 pl-6 font-medium", TONE[tone][0], className)}
      {...rest}
    >
      {children}
      <span
        aria-hidden
        className={cn(
          "grid size-9 place-items-center rounded-full transition-[scale] duration-(--da-duration) ease-da-emphasized group-hover:scale-110 motion-reduce:transition-none",
          TONE[tone][1],
        )}
      >
        <ArrowUpRight className="size-4 transition-transform duration-(--da-duration) group-hover:rotate-45 motion-reduce:transition-none" />
      </span>
    </a>
  );
}

export default ArrowButton;