import { Popover } from "@mui/material";
import DatePickerContent from "./DatePickerContent";

function ButtonDate({ anchorEl, setAnchorEl, open, id, updateDate, children }) {
  const handleClose = () => setAnchorEl(null);

  return (
    <>
      {children}
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "right",
        }}
        sx={{
          "& .MuiPaper-root": {
            padding: { xs: "12px 12px 0", sm: "24px 24px 0" },
            background: "#FFF",
            borderRadius: "8px",
            border: "1px solid #EFEFEF",
            boxShadow: "0px 1px 24.8px 0px rgba(204, 204, 204, 0.18)",
          },
        }}
      >
        <DatePickerContent updateDate={updateDate} handleClose={handleClose} />
      </Popover>
    </>
  );
}

export default ButtonDate;
