---
import { Icon } from 'astro-icon/components';

type Variant = 'solid' | 'outline' | 'category';

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

const { variant = 'solid', icon, href, class: className } = Astro.props;

const variants: Record<Variant, string> = {
  // accent-fill (not accent) keeps small text ≥ 4.5:1 in both themes.
  solid: 'bg-accent-fill text-on-accent-fill font-semibold',
  outline: 'border border-line text-fg-muted',
  category:
    'bg-khaki text-ink font-semibold dark:bg-bg-alt dark:text-fg dark:border dark:border-line',
};
const Tag = href ? 'a' : 'span';
---

<Tag
  href={href}
  class:list={[
    'inline-flex w-fit items-center gap-1 rounded-sm px-2 py-0.5 text-xs leading-5',
    variants[variant],
    href && 'hover:underline',
    className,
  ]}
>
  {icon && <Icon name={icon} class="size-3.5" aria-hidden="true" />}
  <slot />
</Tag>