import aivaz from "../../images/aivaz.png";
import "../../styles/styles.css";
import { TPopup } from "../../utils/types";
import { useHistory } from "react-router-dom";

export const PopupConnect: React.FC<any> = ({
  setVisible,
  text,
  onConnect,
  logo
}) => {
  const history = useHistory();


  return (
    <div className="popup__container">
      <img alt="logoRC" className="logo__popup" src={logo}></img>
      <div className="popup">
        <div className="button__container">
          <p className="button__title">{text.caption} </p>
          <button onClick={() => onConnect()} className="button">
            {text.button.connectEx}
          </button>
          <span className="line"></span>
        </div>
        <div className="button__container">
          <p className="button__title">{text.caption1} </p>
          <button
            className="button button__disabled"
            onClick={() =>
              setVisible({
                popup1: false,
                popup2: true,
              })
            }
          >
            {text.button.connectNew}
          </button>
          <span className="line"></span>
          <button onClick={() => history.goBack()} className="popup__caption">
            {text.caption2}
          </button>
        </div>
      </div>
    </div>
  );
};