---
export interface Props {
  href: string;
  className?: string;
  ariaLabel?: string;
  title?: string;
  disabled?: boolean;
  newTarget?: boolean;
}

const { href, className, ariaLabel, title, disabled = false, newTarget = true } = Astro.props;
---

<a
  href={disabled ? "#" : href}
  tabindex={disabled ? "-1" : "0"}
  class={`group inline-block ${className}`}
  aria-label={ariaLabel}
  title={title}
  aria-disabled={disabled}
  target={ newTarget ? "_blank" : "_self"}
>
  <slot />
</a>

<style>
  a {
    @apply hover:text-skin-accent;
  }
</style>