import "../PopupShare/sharePopup.css";
import "./ExitPopup.css";
import { TSidebarPopup } from "../../utils/types";
import { useTranslation } from "react-i18next";

export const ExitPopup: React.FC<TSidebarPopup> = ({ setClose, onExit }) => {
  const { t } = useTranslation();

  return (
    <div className="exit-popup-container">
      <div className="mobile-users-part-header exit-popup-header">
        <span className="mobile-users-part-header-title exit-popup-button-title">
          {t("popup-control-exit-title")}
        </span>
        <button
          onClick={() => setClose()}
          className="mobile-users-part-header-close-button"
        ></button>
      </div>
      <div className="exit-popup-button-container">
        <button
          onClick={() => setClose()}
          className="exit-popup-button exit-popup-button_confirm"
        >
          {t("popup-control-no")}
        </button>
        <button
          onClick={() => onExit?.()}
          className="exit-popup-button exit-popup-button_finish"
        >
          {t("popup-control-yes")}
        </button>
      </div>
    </div>
  );
};
