import { Button as AriaButton, type ButtonProps } from 'react-aria-components';

import styles from './Button.module.css';

interface Props extends Omit<ButtonProps, 'className' | 'style'> {
  /**
   * A row is a full-width action (the foot of a panel); an icon is a square in a strip or in a
   * row of tabs; an action is a form button, a raised surface instead of colour (prompt §4.2:
   * there are no green "save" and no red "delete" buttons); a primary is that same form button one
   * surface step higher — the main action of a form, still by surface and not by colour.
   */
  look?: 'row' | 'icon' | 'action' | 'primary';
}

// The look is set by an attribute rather than by a set of classes: that way the class name stays a
// single one and a typo in it is caught by the structural test instead of slipping away as
// className="undefined".
export function Button({ look = 'row', ...props }: Props) {
  return <AriaButton {...props} data-look={look} className={styles.button} />;
}