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

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


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