import React, { ReactNode, useRef } from 'react';

interface IconButtonProps {
    children: ReactNode;
    onClick: () => void;
    className: string;
}

const IconButton: React.FC<IconButtonProps> = ({ children, onClick, className }) => {
    const buttonRef = useRef<HTMLButtonElement>(null);

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

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

    return (
        <button
            type="button"
            ref={buttonRef}
            onClick={handleClick}
            className={`c-icon-button ${className && className}`}
        >
            {children}
        </button>
    );
};

export default IconButton;