import React, { useEffect } from "react";

const CustomPopUp = ({
  name,
  btn_class,
  title,
  children,
  isOpen,
  setIsOpen,
  modalHandler,
}) => {
  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleClose = () => {
    setIsOpen(false);
  };

  useEffect(() => {
    if (modalHandler) {
      document.body.style.overflowY = "hidden";
    }
    return () => {
      document.body.style.overflowY = "unset";
    };
  });

  return (
    <div>
      <button onClick={handleOpen} className={btn_class}>
        {name}
      </button>

      {isOpen && (
        <div className="modal-com">
          <div
            className={`fixed top-0 left-0 w-full lg:h-[100vh] h-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50`}
          ></div>
          <div className="children-element fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto ">
            <div className="bg-white rounded-md p-6 shadow-lg transform transition-all duration-300 ease-in-out dark:bg-dark-white logout-modal-wrapper lg:w-[460px] lg:h-auto  max-[467px]:max-w-[26rem]">
              <div className="w-full flex items-center justify-between lg:px-4 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
                {title && (
                  <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide cursor-default">
                    {title}
                  </h1>
                )}
                <button onClick={handleClose}>
                  <CloseIcon />
                </button>
              </div>
              <div className="logout-modal-body w-full flex flex-col items-center px-4 py-8">
                {children && children}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default CustomPopUp;

const CloseIcon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    strokeWidth={1.5}
    stroke="currentColor"
    className="w-6 h-6"
  >
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M6 18L18 6M6 6l12 12"
    />
  </svg>
);