import React, { useState, useRef, useNavigate, useCallback } from 'react';
import {
  CardContainer,
  CardBody,
  ModalCardContainer,
  CloseModalButton,
} from "./index.styled";
import Modal from "react-modal";
import ButtonComponent from "../../button";
import img from "../assets/images/subtract.png";
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";
const SecuritySuccessModal = (props) => {
  const { findText } = useTranslation(wordStore);
  const modalCustomStyles = {
    overlay: {
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      zIndex: 9999999999,
      transition: 'opacity 2000ms ease-in-out',
    },
    content: {
      position: 'absolute',
      overflow: 'auto',
      WebkitOverflowScrolling: 'scroll',
      outline: 'none',
      top: '50%',
      left: '50%',
      right: 'auto',
      bottom: 'auto',
      marginRight: '-50%',
      transform: 'translate(-50%, -50%)',
      borderRadius: '30px',
      border: 'none',
      zIndex: 333333333,
      background: 'transparent',
      width: '422px',
    },
  };
  return (
    <Modal
      isOpen={props.isOpen}
      onRequestClose={props.onRequestClose}
      style={modalCustomStyles}
      closeTimeoutMS={0}
      ariaHideApp={false}
      contentLabel={findText("Selected Option")}
    >
      <ModalCardContainer>
        <CardContainer>
          <CardBody>
            <div className="ssm_img">
              <img src={img} alt="" />
            </div>
            <p className="ssm_txt">{props.title}</p>

            <div className="btn__footer">
              <ButtonComponent
                text={findText("Close")}
                styles={{
                  width: "125px",
                  margin: 0,
                  height: 40,
                }}
                onClick={props.onRequestClose}
              />
            </div>
          </CardBody>
        </CardContainer>
      </ModalCardContainer>
    </Modal>
  );
};
export default SecuritySuccessModal;
