import * as React from 'react';

import { ButtonSizeEnum } from '../utils';
import '../index.less';

export interface IButtonProps extends React.HTMLProps<HTMLButtonElement> {
    children: any,

    className?: string,
    disabled?: boolean,
    buttonSize?: ButtonSizeEnum,
}

export const BaseButton = ({ children, className, disabled, buttonSize, type, ...rest }: IButtonProps) => {
    let content = children;
    const sizeClass = buttonSize !== ButtonSizeEnum.MEDIUM ? `button--${buttonSize}` : '';

    if (typeof children === 'string') {
        content = (
            <span>
                {children}
            </span>
        );
    }

    return (
        <button
            {...rest}
            type={type}
            className={`button ${className} ${sizeClass}`}
            disabled={disabled}
        >
            {content}
        </button>
    );
};

BaseButton.defaultProps = {
    buttonSize: ButtonSizeEnum.MEDIUM,
    className: '',
    disabled: false,
    type: 'button',
};