import Link from "next/link";
import { ReactNode } from "react";

const arrowChildren = (children: ReactNode) => (
  <>
    <span className="transition-opacity duration-300 ease-in-out group-hover:opacity-67">
      {children}
    </span>
    <span
      className="translate-x-0 opacity-0 transition-all duration-300 ease-in-out group-hover:translate-x-1 group-hover:opacity-33"
      aria-hidden
    >
      →
    </span>
  </>
);

type ArrowLinkProps = {
  href: string;
  children: ReactNode;
  className?: string;
  target?: string;
  rel?: string;
};

export function ArrowLink({ href, children, className, target, rel }: ArrowLinkProps) {
  return (
    <Link href={href} className={["group inline-flex items-baseline gap-1", className].join(" ")} target={target} rel={rel}>
      {arrowChildren(children)}
    </Link>
  );
}

type ArrowButtonProps = {
  onClick: () => void;
  children: ReactNode;
  className?: string;
};

export function ArrowButton({ onClick, children, className }: ArrowButtonProps) {
  return (
    <button type="button" onClick={onClick} className={["group inline-flex items-baseline gap-1", className].join(" ")}>
      {arrowChildren(children)}
    </button>
  );
}