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

export interface ButtonProps {
  /** Renders an anchor when set, a button element otherwise. */
  href?: string;
  size?: 'default' | 'small';
  children?: ReactNode;
}

/** A filled action. Its label names the action: "Talk to us", never "Learn more". */
export function Button({ href, size = 'default', children }: ButtonProps) {
  const className = cx('button', size === 'small' && 'button--small');
  if (href) {
    return (
      <a className={className} href={href}>
        {children}
      </a>
    );
  }
  return (
    <button className={className} type="button">
      {children}
    </button>
  );
}