import Link from "next/link";
import { Icon } from "@/components/general/Icon";

/**
 * A link styled as a button. Internal links use next/link with a forward arrow;
 * external links open in a new tab with an external icon. isExternal is inferred
 * from the href unless passed explicitly.
 */
export const ButtonLink = ({
  href,
  isExternal,
  children,
}: {
  href: string;
  isExternal?: boolean;
  children: React.ReactNode;
}) => {
  const external =
    isExternal ?? (!href.startsWith("/") && !href.startsWith("#"));

  if (external) {
    return (
      <a
        href={href}
        className="button"
        target="_blank"
        rel="noopener noreferrer"
      >
        <span>{children}</span>
        <Icon type="externalLink" />
      </a>
    );
  }

  return (
    <Link href={href} className="button">
      <span>{children}</span>
      <Icon type="arrowRight" />
    </Link>
  );
};