import { Box, Popper, Typography } from "@mui/material";
import { ReactElement, useState } from "react";
import Paper from "../Paper/Paper";

const Tooltip = ({ message, children }) => {
    const [anchorEl, setAnchorEl] = useState(null);

    const handlePopoverOpen = (event) => {
        setAnchorEl(event.currentTarget);
    };

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

    const open = Boolean(anchorEl);
    const id = open ? undefined : "info-tooltip";

    return (
        <Box
            style={{
                display: "inline-flex",
                justifyContent: "center",
                alignSelf: "center",
            }}
            onMouseEnter={handlePopoverOpen}
            onMouseLeave={handlePopoverClose}
            >
            {children}
            <Popper
                id={id}
                open={open}
                anchorEl={anchorEl}
                placement="bottom"
                className="tooltip"
                nonce={undefined}
                onResize={undefined}
                onResizeCapture={undefined}
                slotProps={undefined}
                slots={undefined}
            >
                <Paper style={{ boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px" }} className="info-tooltip">
                    {typeof message === "string" ? (
                        <Typography variant="body1" className="info-tooltip-text">
                            {message}
                        </Typography>
                    ) : (
                        <>{message}</>
                )}
            </Paper>
        </Popper>
    </Box>
);
};

export default Tooltip;