---
type Variant = 'solid' | 'outline' | 'soft' | 'mono';

interface Props {
  variant?: Variant;
  href?: string;
  class?: string;
  ariaLabel?: string;
}

const { variant = 'solid', href, class: className = '', ariaLabel } = Astro.props;
const base =
  'inline-flex items-center gap-1.5 rounded-full font-label-md tracking-wider uppercase text-[11px] px-2.5 py-1 transition-colors duration-200';
const variants: Record<Variant, string> = {
  solid: 'bg-primary text-white',
  outline: 'border border-primary/40 text-primary',
  soft: 'bg-primary/10 text-primary',
  mono: 'bg-on-surface text-background font-mono tracking-tighter',
};
const cls = [base, variants[variant], className].filter(Boolean).join(' ');
---

{
  href ? (
    <a href={href} class={cls} aria-label={ariaLabel}>
      <slot />
    </a>
  ) : (
    <span class={cls}>
      <slot />
    </span>
  )
}