---
import type { HTMLAttributes } from "astro/types";

interface Props extends HTMLAttributes<"a"> {
  includeExternalLinkIcon?: boolean;
}

import { Icon } from "astro-icon/components";

const {
  href,
  class: className,
  includeExternalLinkIcon = true,
  ...attrs
} = Astro.props;

const linkIsExternal: boolean =
  href !== undefined && href !== null
    ? href.toString().startsWith("http")
    : false;
---

<a
  href={href}
  class:list={["group text-primary inline transition", className]}
  target={href?.toString().startsWith("http") ? "_blank" : undefined}
  rel={linkIsExternal ? "noopener noreferrer" : undefined}
  {...attrs}
  ><span class="group-hover:text-primary-100"><slot /></span>{
    includeExternalLinkIcon && linkIsExternal && (
      <sup class="ml-0.5 inline-block">
        <Icon
          name="mdi:external-link"
          class:list={[
            "text-primary group-hover:text-primary-100 m-0 inline-block"
          ]}
        />
      </sup>
    )
  }
</a>