import React from 'react';
import PropTypes from 'prop-types';

const Button = (props) => {
    let inputProps = {...props};
    delete inputProps.buttonType;
    delete inputProps.buttonClassName;

    let buttonClasses = [
        'jp-button',
        props.buttonType,
    ];

    let spanClasses = [
        'jp-button-container',
        props.buttonType === 'ghost' ? 'ghost' : null,
        props.disabled ? 'disabled': null,
        props.buttonClassName
    ];

    return (
        <span className={spanClasses.join(' ')}>
            <input type="button" className={buttonClasses.join(' ')} {...inputProps} />
        </span>
    );
};

  
Button.propTypes = {
    /** Type of the button. */
    buttonType:PropTypes.oneOf(['primary','secondary','tertiary', 'quaternary', 'ghost']),
    /** Set this prop to pass value of button name. */
    value:PropTypes.string,
    /** Set this prop to true to render button disabled */
    disabled:PropTypes.bool,
    /** Custom classname for button */
    buttonClassName: PropTypes.string
};

Button.defaultProps  = {
    buttonType:'primary',
    value:'Submit',
    disabled:false,
    buttonClassName: ''
};

export default Button;