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

//white cta link with white arrow icon
interface WhiteBgLinkProps {
    href: string;
    children: React.ReactNode;
    className?: string;
    showArrow?: boolean;
}

export default function WhiteBgLink({ href, children, className, showArrow = true }: WhiteBgLinkProps) {
    return (
        <Link href={href || "#"} className={`text-[18px] group text-[#00204F] font-bold  bg-white inline-flex items-center rounded-[8px] py-3 px-6 ${className}`}>
            {children}
            {showArrow && (
                <Image
                    className="ml-2 transition-transform duration-600 ease-in-out group-hover:translate-x-1"
                    width={20}
                    height={20}
                    src={DarkBlueArrow}
                    alt="white arrow"
                />
            )}
        </Link>
    );
}