import React from "react";

type TProps = {
    icon: string
    text: string
    onClick: () => void
    isExitButton?: boolean
    helpText?: string
    helpIcon?: string
}

export const SettingButton:React.FC<TProps> = React.memo((props) => {
    return <div className={`setting-button-container ${props.isExitButton ? 'exit' : ''}`} onClick={() => props.onClick()}>
        <div className="setting-button-part">
            <img className="setting-button-icon" src={props.icon} alt={props.text}></img>
            <span className="setting-button-text">{props.text}</span>
        </div>
        <div className="setting-button-part">        
            {
                props.helpText &&
                <span className="setting-button-help-text">{props.helpText}</span>
            }
            {
                props.helpIcon &&
                <img className="setting-button-icon" src={props.helpIcon} alt='' />
            }
        </div>
    </div>
})