import Link from "next/link";
import Image from "next/image";
import BlueArrow from '../../../../public/images/blue-arrow.svg'

//white cta link with white arrow icon
interface BlueBorderLinkProps {
    href?: string;
    children: React.ReactNode;
    className?: string;
    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
}

export default function BlueBorderLink({ href, children, className, onClick }: BlueBorderLinkProps) {
    return (
        <Link href={href || "#"} onClick={onClick} className={`text-[16px] group text-[#1718FF] font-bold  bg-transparent border border-[#1718FF] inline-flex justify-center items-center rounded-[8px] py-2 px-5 md:py-3 md:px-6 ${className}`}>
            {children}
            <Image
                className="ml-1 md:ml-2 mt-[2px] transition-transform duration-500 ease-in-out group-hover:translate-x-1"
                width={20}
                height={20}
                src={BlueArrow}
                alt="white arrow"
            />
        </Link>
    );
}