---
// CP-BASE-004 link
interface Props {
  href: string;
  external?: boolean;
  variant?: 'default' | 'subtle' | 'underline';
}
const { href, external = false, variant = 'default' } = Astro.props;
const isExternal = external || /^https?:\/\//.test(href);
---
<a
  href={href}
  class={`link link--${variant}`}
  rel={isExternal ? 'noopener noreferrer' : undefined}
  target={isExternal ? '_blank' : undefined}
>
  <slot />
</a>

<style>
  .link {
    color: var(--color-primary, #c25a2c);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .link--subtle {
    text-decoration: none;
  }
  .link--underline {
    text-decoration: underline;
  }
  .link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
</style>