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

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

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