import Link, { LinkProps } from "next/link";
import { twMerge } from "tailwind-merge";
import { IconAnchorArrow } from "./Icons";

export default function ActionLink({
  className,
  children,
  ...props
}: LinkProps & React.ComponentPropsWithoutRef<"a">) {
  return (
    <Link
      {...props}
      className={twMerge(
        "group inline-flex select-none items-center gap-x-2.5 text-[17px] font-medium leading-[23px] text-white transition-colors",
        className,
      )}
    >
      {children}
      <IconAnchorArrow className="h-5 w-5 bg-transparent transition-all duration-200 group-hover:rotate-45 group-hover:bg-white group-hover:text-black rounded-full" />
    </Link>
  );
}