import cx from 'classnames';
import styles from './button.css';

const Button = ({children}) => (
  <button className={cx({[styles.button]: true})}>{children}</button>
);

// If we didn't define .button inside button.css then the above cx call
// looks like cx({[undefined]: true}) which actually means the class name
// "undefined" is set.
//
// Our global styles can then make this REALLY ugly and obvious so we can
// visually see "oops we forgot to define some expected class names"
//
// Note this only works because we're using cx which will takes objects where
// the keys are converted to strings