/* 
  This is the popup component.
  It contains the following components:
  - Popup
*/
import React from "react";
import styles from "./popup.module.scss"

// Define the props type for the Popup component
interface PopupProps {
  title: string;
  content: React.ReactNode;
  isOpen: boolean;
  onClose: () => void;
}   
const Popup = ({ title, content, isOpen, onClose } : PopupProps) => {
  if (!isOpen) return null;

  return (
      <div className={`${styles.PopupWrapper} PopupWrapper fixed inset-0 flex items-center justify-center z-[99999]`}>
        <div className={`relative max-w-[600px] w-full mx-[15px]`}>
            {/* Close Btn Start */}
            <button onClick={onClose} className={`SecondaryBtn !p-0 absolute right-0 top-0 z-1 !w-[57px] !h-[57px] rounded-full`}>
                <i className={`Icon IconCross !bg-white w-[14px] h-[14px]`}></i>
            </button>
            {/* Close Btn End */}

            {/* PopupContent Start */}
            <div className={`${styles.PopupContentWrap} relative z-0 rounded-[20px] sm:rounded-[30px] lg:rounded-[40px] bg-white shadow-lg w-full`}>
                {/* Header */}
                <div className={`border-b py-4 xl:py-6 pl-4 xl:pl-6 pr-20 border-[#E4E7EC] flex justify-between items-center`}>
                    <h2 className={`line-clamp-1 h3 !tracking-normal font-semibold w-full`}>{title}</h2>
                </div>
                {/* Content */}
                <div className={`px-4 sm:px-6 pt-4 sm:pt-6 pb-4 sm:pb-6 xxl:pb-8`}>
                    {content}
                </div>
            </div>
            {/* PopupContent End */}
        </div>
    </div>
  );
};

export default Popup;