// From https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-link/

import { Link as GatsbyLink } from "gatsby";

interface Props {
  children?: React.ReactNode;
  to: string;
  activeClassName?: string;
  partiallyActive?: string;
}

// Since DOM elements <a> cannot receive activeClassName
// and partiallyActive, destructure the prop here and
// pass it only to GatsbyLink
const Link = ({
  children,
  to,
  activeClassName,
  partiallyActive,
  ...other
}: Props) => {
  // Si commence par http
  // Si contient
  //    geoportal | geonetwork | metabase | ...

  // Basé sur les données de l'api grapgql = liste des pages ?

  // Tailor the following test to your environment.
  // This example assumes that any internal link (intended for Gatsby)
  // will start with exactly one slash, and that anything else is external.
  const internal = /^\/(?!\/)/.test(to);

  // Use Gatsby Link for internal links, and <a> for others
  if (internal) {
    return (
      <GatsbyLink
        to={to}
        activeClassName={activeClassName}
        partiallyActive={partiallyActive}
        {...other}
      >
        {children}
      </GatsbyLink>
    );
  }
  return (
    <a href={to} {...other}>
      {children}
    </a>
  );
};

export default Link;