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": {
            background: "transparent !important",
            border: "none !important",
          },
        }}
      >
        <DatePickerContent updateDate={updateDate} handleClose={handleClose} />
      </Popover>
    </>
  );
}

export default ButtonDate;