import React from "react";
import NextJSLink, { LinkProps } from "next/link";

interface Props extends Omit<LinkProps, "href" | "as"> {
  to: string;
  template?: string;
  target?: string;
  onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
  onMouseEnter?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
  onMouseLeave?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
}

const Link: React.FC<Props> = ({
  to, template, passHref, onClick, onMouseEnter, onMouseLeave, ...props
}) => {
  if (template) {
    return (
      <NextJSLink href={template} passHref={passHref} as={to} {...props}>
        {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
        <a onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} {...props} />
      </NextJSLink>
    );
  }
  if (to.startsWith("/") || to.startsWith("#")) {
    return (
      <NextJSLink href={to} passHref={passHref} {...props}>
        {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
        <a onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} {...props} />
      </NextJSLink>
    );
  }

  return (
    // eslint-disable-next-line jsx-a11y/anchor-has-content
    <a href={to} onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} {...props} />
  );
};

export default Link;
