import CloseIcon from "@/icons/close.svg";

const BottomPopup = ({ 
  active = false, 
  title, 
  children, 
  closePopup = () => {}
}) => {
  return (
    <>
      <div className={"menu-overlay " + (active ? 'block' : 'hidden')} onClick={closePopup} />
      <div className={`fixed w-full z-[60] py-6 px-4 bg-white rounded-t-3xl idt-transition ${active ? 'bottom-0' : 'bottom-[-100%]'}`}>
        <div className="flex justify-between items-center mb-5">
          <h2 className="text-xl font-semibold">{ title }</h2>
          <button onClick={closePopup}>
            <CloseIcon className="w-7" />
          </button>
        </div>
        { children }
      </div>
    </>
  );
};

export default BottomPopup;