---
interface Props {
  href: string;
  variant?: 'default' | 'strong';
  target?: '_blank' | '_self';
  rel?: string;
  class?: string;
}

const {
  href,
  variant = 'default',
  target,
  rel = target === '_blank' ? 'noopener noreferrer' : undefined,
  class: className
} = Astro.props;
---

<a
  class:list={['content-link', { 'content-link--strong': variant === 'strong' }, className]}
  href={href}
  target={target}
  rel={rel}
>
  <slot />
</a>

<style>
  .content-link {
    color: var(--color-accent-strong);
    text-decoration: none;
  }

  .content-link:hover,
  .content-link:focus-visible {
    color: var(--color-accent);
  }

  .content-link--strong {
    font-weight: 700;
  }
</style>