"use client";

import { Drawer, Modal } from "@mui/material";
import { styleDefault } from "@/mui";
import Content from "./Content";

function ModalOpenLocation({ open, setOpen, handleClose, children }) {
  const toggleDrawer = (newOpen) => () => {
    setOpen(newOpen);
  };

  return (
    <>
      {/* Button Modal */}
      {children}
      {/* Content Modal */}
      <Modal open={open} onClose={handleClose} className="!hidden md:!flex">
        <div
          style={styleDefault}
          className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden"
        >
          <Content onClose={handleClose} />
        </div>
      </Modal>
      <Drawer
        open={open}
        anchor="bottom"
        onClose={toggleDrawer(false)}
        className="!flex md:!hidden"
        sx={{
          "& .MuiPaper-root": {
            borderRadius: "25px 25px 0px 0px !important",
            overflow: "hidden",
          },
        }}
      >
        <div className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden !shadow-[0px_1px_24.8px_0px_rgba(155,_155,_155,_0.27)]">
          <Content handleClose={handleClose} />
        </div>
      </Drawer>
    </>
  );
}

export default ModalOpenLocation;