import Link from "next/link";
import type { ReactNode } from "react";

import styles from "./TextLink.module.css";

/** Ink text with a hairline underline that turns green on hover. */
export function TextLink({
  href,
  children,
  external,
  className,
  "data-event": dataEvent,
}: {
  href: string;
  children: ReactNode;
  external?: boolean;
  className?: string;
  "data-event"?: string;
}) {
  const cn = [styles.link, className].filter(Boolean).join(" ");
  if (
    external ||
    href.startsWith("http") ||
    href.startsWith("tel:") ||
    href.startsWith("mailto:")
  ) {
    return (
      <a
        href={href}
        className={cn}
        data-event={dataEvent}
        {...(href.startsWith("http") ? { target: "_blank", rel: "noopener noreferrer" } : {})}
      >
        {children}
      </a>
    );
  }
  return (
    <Link href={href} className={cn} data-event={dataEvent}>
      {children}
    </Link>
  );
}

/** A mono "next step" link, e.g. TË GJITHA REFERENCAT →. */
export function ForwardLink({
  href,
  children,
  external,
}: {
  href: string;
  children: ReactNode;
  external?: boolean;
}) {
  const inner = (
    <>
      <span>{children}</span>
      <span className={styles.arrow} aria-hidden="true">
        →
      </span>
    </>
  );

  if (external) {
    return (
      <a href={href} className={styles.forward} target="_blank" rel="noopener noreferrer">
        {inner}
      </a>
    );
  }
  return (
    <Link href={href} className={styles.forward}>
      {inner}
    </Link>
  );
}