import React, { useState } from "react";
import Button from "@mui/material/Button";
import { Popover as MuiPopover, PopoverProps as MuiPopoverProps } from "@mui/material";
import Typography from "@mui/material/Typography";

export interface PopoverProps extends MuiPopoverProps {
}

export const Popover = ({ ...rest }: PopoverProps) => {
  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);

  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open: boolean = Boolean(anchorEl);
  const id: string | undefined = open ? "simple-popover" : undefined;

  return (
    <div>
      <Button onClick={handleClick} aria-describedby={id}>
        Open Popover
      </Button>
      <MuiPopover
      {...rest}
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "center",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "center",
        }}
      >
        <Typography sx={{ p: 2 }}>Popover Text Displayed Here</Typography>
      </MuiPopover>
    </div>
  );
};