import React from "react";
import { Box, Modal } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";

const modalStyle = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  bgcolor: "background.paper",
  boxShadow: 24,
  p: 2,
};

export default function Calendly({ style, btnName }) {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  return (
    <>
      <button
        style={{
          background: "#015C9F",
          color: "white",
          borderRadius: "10px",
          ...style,
        }}
        onClick={handleOpen}
      >
        {btnName}
      </button>
      {open ? (
        <Modal open={open} onClose={handleClose}>
          <Box
            sx={modalStyle}
            width={{ xs: 300, sm: 600, md: 1200 }}
            height={{ xs: 480, sm: 400, md: 600 }}
            zIndex={9}
          >
            <Box
              onClick={handleClose}
              sx={{
                position: "absolute",
                right: { sm: 20, md: 60 },
                cursor: "pointer",
              }}
            >
              <CloseIcon />
            </Box>
            <iframe
              src="https://calendly.com/akadmy-app/30min?month=2024-09"
              width={"100%"}
              height={"100%"}
            />
          </Box>
        </Modal>
      ) : null}
    </>
  );
}
