---
interface Props {
  href?: string;
  active?: boolean;
  tone?: 'blue' | 'amber' | 'teal' | 'violet' | 'neutral' | 'accent';
  class?: string;
  style?: string;
}

const {
  href,
  active = false,
  tone = 'neutral',
  class: className = '',
  ...rest
} = Astro.props;

const classes = [
  'ui-filter-pill',
  `ui-filter-pill--${tone}`,
  active && 'is-active',
  className,
].filter(Boolean).join(' ');
---

{href ? (
  <a href={href} class={classes} {...rest}>
    <slot />
  </a>
) : (
  <button type="button" class={classes} {...rest}>
    <slot />
  </button>
)}
