import type { AnchorHTMLAttributes, ReactNode } from 'react';
import { cx } from '../_internal/cx';

export interface ButtonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {
  /** `primary` = filled blue pill (`.kwac-button`), `ghost` = outlined blue pill (`.kwac-button-ghost`). */
  variant?: 'primary' | 'ghost';
  /** `compact` renders the small 13px pill used inside the sticky VehicleBar (`.kwac-cta`). Ghost is not available in compact. */
  size?: 'default' | 'compact';
  /** Link target. Buttons are always anchors: the eBay template allows no JavaScript, forms or handlers. */
  href: string;
  children: ReactNode;
}

/**
 * Call-to-action pill. Renders an `<a>` with the semantic class `kwac-button`
 * (or `kwac-cta` when compact). Use `primary` for the one main action of a
 * section and `ghost` for the secondary one; place both inside `CtaActions`
 * or at the bottom of an `OfferCard`.
 */
export function Button({ variant = 'primary', size = 'default', className, children, ...rest }: ButtonProps) {
  const base = size === 'compact' ? 'kwac-cta' : cx('kwac-button', variant === 'ghost' && 'kwac-button-ghost');
  return (
    <a className={cx(base, className)} {...rest}>
      {children}
    </a>
  );
}