import * as React from "react";
import styled from "styled-components";

const getButtonBackground = (mode: string): string => {
    switch (mode) {
        case "DANGER":
            return "red";
        default:
            return "white";
    }
};

const getButtonColor = (mode: string): string => {
    switch (mode) {
        case "DANGER":
            return "white";
        default:
            return "black";
    }
};

const StyledButton = styled.button<ExampleButtonProps>`
  color: ${props => getButtonColor(props.mode)};
  background: ${props => getButtonBackground(props.mode)};
  font-size: 15px;
  height: 3rem;
  width: 10rem;
  border-radius: 3%;
  &:hover {
      cursor: ${props => (props.disabled ? "not-allowed" : "pointer")};
  }
  &:disabled {
    cursor: ${props => (props.disabled ? "not-allowed" : "pointer")};
  }
`;

type ExampleButtonProps = {
    children: any,
    disabled?: boolean,
    mode: string,
    onClick: () => {},
}

const ExampleButton: React.FunctionComponent<ExampleButtonProps> = ({ children, disabled, mode = 'PRIMARY', onClick }) => {
    return (
        <StyledButton disabled={disabled} onClick={onClick} mode={mode}>
            {children}
        </StyledButton>
    );
};

export { ExampleButton };