import "../../styles/styles.css";
import "./popupConnect.css";
import { TPopup } from "../../utils/types";
import aivaz from "../../images/aivaz.png";
import { useState } from "react";

export const PopupConnectEx: React.FC<any> = ({
  setVisible,
  text,
  onConnect,
  logo,
}) => {
  const [value, setValue] = useState<string>("");


  return (
    <div className="popup__container">
      <div className="popup__content">
        <img alt="logoRC" className="logo__popup_ex" src={logo}></img>
        <p className="popup__title">{text.caption}</p>
        <input
          value={value}
          onChange={(e) => setValue(e.target.value)}
          className="popup__input"
        ></input>
        <button
          onClick={() => onConnect(value)}
          disabled={!!!value}
          type="submit"
          className={!!value ? "button" : "button button__disabled"}
        >
          {text.button}
        </button>
        <span className="line"></span>
        <button
          onClick={() =>
            setVisible({
              popup1: true,
              popup2: false,
            })
          }
          className="popup__caption"
        >
          {text.caption1}
        </button>
      </div>
    </div>
  );
};
