import { ReactNode } from "react";
import { ArrowLongRightIcon } from "@heroicons/react/24/solid";
import Link from "next/link";

interface Props {
  className?: string;
  href: string;
  target?: string;
  children?: ReactNode;
}

const LearnMoreLinkLight = ({ className, href, target, children }: Props) => {
  return (
    <Link
      target={target}
      href={href}
      className={
        "drop-shadow-blue-md-md hover:drop-shadow-blue-xl m-3 my-0 inline-block rounded-lg bg-primary-300 p-3 text-center align-middle font-bold text-primary-500 transition-all duration-300 hover:bg-primary-100 " +
        className
      }
    >
      {children}{" "}
      <ArrowLongRightIcon className="inline w-[24px]"></ArrowLongRightIcon>
    </Link>
  );
};

export default LearnMoreLinkLight;