diligent-react-ts/src/components/Button/Button.tsx

import React, { useRef } from 'react';

type Size = 'sm' | 'md' | 'lg' | 'xl';
type Type = 'button' | 'submit' | 'reset';
type TextTransform = 'uppercase' | 'capitalize';
type MinWidth = 'auto' | 'none';

interface ButtonProps {
    variant?: string;
    size?: Size;
    children?: React.ReactNode;
    authButton?: boolean;
    type?: Type;
    onClick?: () => void;
    textTransform?: TextTransform;
    className?: string;
    disabled?: boolean;
    hidden?: boolean;
    minWidth?: MinWidth;
}

const Button: React.FC<ButtonProps> = ({
    variant,
    size,
    children,
    authButton,
    type,
    onClick,
    textTransform,
    className,
    disabled,
    hidden,
    minWidth,
    ...restProps
}) => {
    const buttonRef = useRef<HTMLButtonElement>(null);

    function styles() {
        let style = 'c-btn';

        if (variant) {
            style += ` c-btn--${variant}`;
        }

        if (size) {
            style += ` c-btn--${size}`;
        }

        if (textTransform) {
            style += ` c-btn--${textTransform}`;
        }

        if (authButton) {
            style += ` c-btn--auth`;
        }

        if (minWidth) {
            style += ` c-btn--${minWidth}`;
        }

        if (hidden) {
            style += ` c-btn--hidden`;
        }

        if (className) {
            style += ` ${className}`;
        }

        return style;
    }

    function handleClick() {
        if (buttonRef.current != null) {
            buttonRef.current.blur();
        }



        if (typeof onClick === 'function') {
            onClick();
        }
    }

    return (
        <button
            ref={buttonRef}
            className={styles()}
            onClick={handleClick}
            type={type}
            disabled={disabled}
            {...restProps}
        >
            {children}
        </button>
    );
};

Button.defaultProps = {
    type: 'button',
};

export default Button;