import React from "react";

import CSSModules from "react-css-modules";

import classNames from "classnames";

import styles from "./Button.module.sass";

export type ButtonTheme =
  | "primary"
  | "primary-white";

export interface ButtonProps {
  onClick: () => void;
  id?: string;
  disabled?: boolean;
  children?: React.ReactNode;
  theme?: ButtonTheme;
}

export const Button: React.SFC<ButtonProps> =
  CSSModules(styles)(
    ({
      theme = "primary",
      children,
      ...restProps
    }: ButtonProps) =>
      <button
        { ...restProps }
        styleName={
          classNames(
            "button",
            theme
          )
        }
      >
        { children }
      </button>
    );

@import "~@assets/stylesheets/sass-variables"

$button-disabled-background-color: rgba($black, .1)

.button
  display: inline-block
  height: var(--button-height)
  padding: 0 15px
  font-family: "Open Sans", sans-serif
  font-size: 14px
  font-weight: 600
  white-space: nowrap
  cursor: pointer
  border: 0
  border-radius: 6px
  outline: none
  box-sizing: border-box

  &:not([disabled]):hover
    background-color: var(--color-action)

  &:disabled
    color: $button-disabled-color
    cursor: auto
    background-color: $button-disabled-background-color
.primary
  color: var(--color-white)
  background-color: var(--color-primary)
.primary-white
  color: var(--color-primary)
  background-color: var(--color-white)