import React, { useState } from "react";
import { CloseIcon } from "@/assets/svgs";

const ScaleModalOverlay = ({
  children,
  title,
  isOpen = false,
  modalCloseClick,
  modalHeader,
  classes,
}) => {
  const [offsetTop, setOffsetTop] = useState(0);

  const onClose = (e) => {
    if (e.target.id === "overlay") {
      modalCloseClick();
    }
  };

  return (
    <div
      onClick={onClose}
      style={{
        zIndex: 10,
      }}
      id="overlay"
      className={`fixed inset-0 m-auto h-full w-full scale-0 items-center justify-center bg-transparent p-5 transition-all ${
        isOpen ? "scale-100" : "scale-0"
      } ${classes?.modal}`}
    >
      <div
        style={{
          top: `${offsetTop / 16}rem`,
          bottom: offsetTop === 0 && 0,
        }}
        className={`absolute inset-x-0  m-auto flex h-fit w-[60%] transition-all`}
      >
        <div
          className={`flex h-full w-full flex-col justify-start rounded-lg border-2 bg-white shadow md:h-full md:max-h-full md:w-full ${classes?.modalDialog}`}
        >
          {modalHeader && (
            <div
              className={`flex h-[10%] max-h-[10%] items-center justify-between border-b pb-2`}
            >
              <div>
                <h5 className="text-center text-lg font-bold uppercase">
                  {title}
                </h5>
              </div>
              <div
                className="modal-close cursor-pointer"
                onClick={modalCloseClick}
              >
                <CloseIcon />
              </div>
            </div>
          )}

          <div
            className={`flex flex-col ${
              modalHeader ? "h-fit max-h-fit" : "h-full max-h-full "
            } ${classes?.modalBody}`}
          >
            {children}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ScaleModalOverlay;
