---
export type Props = {
  url: string;
  class?: string;
  external?: boolean;
  "aria-label"?: string;
};

const { url, external, class: className } = Astro.props;
---

<a
  href={url}
  class:list={[
    "zag-offset underline font-medium flex items-center focus:outline-2 focus:outline-offset-2 focus:outline-zag-dark dark:focus:outline-zag-light",
    className,
  ]}
  target={external ? "_blank" : "_self"}
  aria-label={Astro.props["aria-label"]}
>
  <slot />
  {
    external ? (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-6 h-6"
        viewBox="0 0 512 512"
      >
        <path
          class="zag-fill zag-transition"
          fill-rule="evenodd"
          d="M362.666 149.333V320H320l-.001-97.831l-154.51 154.51l-30.169-30.17L289.829 192h-97.83v-42.666z"
        />
      </svg>
    ) : null
  }
</a>