import Link, { LinkProps } from "next/link";
import { MdArrowForward } from "react-icons/md";
import { twMerge } from "tailwind-merge";

type RippleActionLinkProps = LinkProps &
  React.ComponentPropsWithoutRef<"a"> & {
    rippleClassName?: string;
    withoutArrow?: boolean;
  };

export default function RippleActionLink({
  className,
  children,
  rippleClassName,
  withoutArrow,
  ...props
}: RippleActionLinkProps) {
  return (
    <Link
      {...props}
      className={twMerge(
        "group relative inline-block overflow-hidden px-3 py-2 font-medium transition-colors",
        className,
      )}
    >
      <div className="relative z-10 inline-flex items-center gap-x-4">
        <span>{children}</span>
        {Boolean(!withoutArrow) && (
          <MdArrowForward className="relative flex-shrink-0 -rotate-45" />
        )}
      </div>
      <div
        className={twMerge(
          "absolute -bottom-full left-1/2 top-0 z-0 w-1/3 -translate-x-1/2 translate-y-1/2 rounded-full transition-[transform,opacity] duration-500 group-hover:scale-[4]",
          rippleClassName,
        )}
      />
    </Link>
  );
}