import React from 'react';
import classNames from 'classnames';

export enum ButtonSize {
    Large = 'lg',
    Small = 'sm',
}

export enum ButtonType {
    Primary = 'primary',
    Danger = 'danger',
    Link = 'link',
    Default = 'default',
}

interface ButtonProps {
    size?: ButtonSize;
    btnType?: ButtonType;
    className?: string;
    disabled?: boolean;
    children: React.ReactNode;
    href?: string;
}

const Button = (props: ButtonProps) => {
    const {
        size,
        btnType,
        disabled,
        children,
        href,
    } = props;

    const classes = classNames('fun-btn', {
        [`fun-btn-${btnType}`]: btnType,
        [`fun-btn-${size}`]: size,
        'fun-btn-disabled': (btnType === ButtonType.Link) && disabled
    })

    if(btnType === ButtonType.Link && href) {
        return (
            <a 
                className={classes}
                href={href}
            >
                {children}
            </a>
        )
    } else {
        return (
        <button 
            className={classes}
            disabled={disabled}
        >
            {children}
        </button>
        )
    }
}

Button.defaultProps = {
    disabled: false,
    btnType: ButtonType.Default
}

export default Button;