import React from 'react';
import { stylesheet, css } from '../../util';
import {
  MEDIUM_COLOR,
  LIGHT_PRIMARY_TEXT_COLOR,
  BUTTON_LINK_TYPE,
  LIGHT_COLOR,
} from '../../styles';

const STYLES = stylesheet({
  button: {
    ...BUTTON_LINK_TYPE,
    background: MEDIUM_COLOR,
    border: 0,
    borderRadius: '3px',
    color: LIGHT_PRIMARY_TEXT_COLOR,
    cursor: 'pointer',
    padding: '16px 34px 14px 34px',
    ':focus': {
      outline: 'none',
      background: LIGHT_COLOR,
    },
  },
});

export interface IButtonProps {
  label: string;
  onClick?(e: React.MouseEvent<any>): any;
}

export class Button extends React.PureComponent<IButtonProps, void> {
  render() {
    const {
      label,
      onClick,
    } = this.props;

    return (
      <button key={label} {...css(STYLES.button)} onClick={onClick}>{label}</button>
    );
  }
}