import React, {forwardRef} from 'react';
import cls from 'classnames';
import {AbstractButton, AbstractButtonProps} from '@core0/abstract-button';
import {PaletteType} from '@core0/theme';
import cn from './rectButton.module.styl';

interface RectButtonProps extends AbstractButtonProps {
    inverse?: boolean;
    flat?: boolean;
    color?: PaletteType;
    spinnerColor?: string;
}

export const RectButton = forwardRef<HTMLButtonElement, RectButtonProps>((props, hostElmRef) => {
    const {className = '', color = 'primary', spinnerColor = '', inverse = false, flat = false, children, ...rest} = props;

    const classNames = cls(
        className,
        cn.rectButton,
        cn[`theme-${color}`],
        inverse && cn.inverse,
        flat && cn.flat
    );

    return (
        <AbstractButton ref={hostElmRef} className={classNames} inverse={inverse} color={color} spinnerColor={spinnerColor} {...rest}>
            {children}
        </AbstractButton>
    );
});