import React from "react";
import controlOnIcon from './icons/constrolOnIcon.svg';
import controlOffIcon from './icons/constrolOffIcon.svg';

type TProps = {
    state: 'default' | 'waiting' | 'return'
    userType: 'admin' | 'user'
    onClick: () => void
}

const titleButtonAdmin = {
    default: 'Передать управление',
    waiting: 'Передать управление',
    return: 'Вернуть управление'
}

const titleButtonUser = {
    default: 'Запросить управление',
    waiting: 'Запросить управление',
    return: 'Вернуть управление'
}

export const ControlButton:React.FC<TProps> = React.memo((props) => {
    return <div className={`control-button ${props.state}`} onClick={() => props.onClick()}>
        <img 
            className="control-button-icon"
            alt="control icon"
            src={
                props.userType === "admin" || props.state === 'return'
                ? controlOnIcon
                : controlOffIcon
            }
        />
        <span className="constrol-button-title">
            {
                props.userType === "admin"
                ? titleButtonAdmin[props.state]
                : titleButtonUser[props.state]
            }
        </span>
    </div>
})