---
/**
 * Button — the labelled action button.
 * variant: 'secondary' (default) | 'primary'
 * href: renders an <a>; without it, a <span> (for specimens) or pass as="button".
 * arrow: shows the 16px arrow after the label.
 * state: 'hover' | 'focus' | 'pressed' — forces a state for documentation.
 */
interface Props {
  variant?: 'primary' | 'secondary';
  href?: string;
  as?: 'a' | 'button' | 'span';
  arrow?: boolean;
  state?: 'hover' | 'focus' | 'pressed';
  class?: string;
  [attr: string]: any;
}
const { variant = 'secondary', href, as, arrow = false, state, class: extra, ...rest } = Astro.props;
const Tag = as ?? (href ? 'a' : 'span');
---
<Tag class:list={['action-button', { 'is-primary': variant === 'primary' }, state && `is-${state}`, extra]} href={href} {...rest}><slot />{arrow && <Fragment> <span class="action-button-arrow" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M3 8h10M9 4l4 4-4 4"/></svg></span></Fragment>}</Tag>