import React, { useEffect, useState } from "react";
import Tooltip, { tooltipClasses } from "@mui/material/Tooltip"; // Replace with HtmlTooltip if customized
import Button from "@mui/material/Button";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faInfoCircle, faClose } from "@fortawesome/free-solid-svg-icons";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import styled from "@emotion/styled";

const HtmlTooltip = styled(({ customClassName, className, ...props }) => (
  <Tooltip {...props} classes={{ popper: `${className} ${customClassName}` }} />
))(({ theme }) => ({
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: "#f5f5f9",
    color: "rgba(0, 0, 0, 0.87)",
    maxWidth: 450,
    fontSize: theme.typography.pxToRem(12),
    border: "1px solid #dadde9",
  },
}));

const InfoTooltipButton = ({ setSelectedRowInfo, selectedRowInfo, t, row, currentId }) => {
  const [open, setOpen] = useState(false);

  const handleTooltipOpen = (event) => {
    event.stopPropagation();
    setOpen(true);
    console.log(">>>>");
    console.log("selectedRow", selectedRowInfo);
    setSelectedRowInfo(currentId);
  };

  const handleTooltipClose = (e) => {
    e.stopPropagation();
    setOpen(false);
  };

  return (
    <HtmlTooltip
      id={`remove-element-${row.original.user_id}`}
      disableFocusListener
      disableHoverListener
      disableTouchListener
      open={open}
      onClose={handleTooltipClose}
      title={
        <>
          <div className="flex-container widget-header paddingLeft5 paddingRight5 fontBold fontSize14">
            <div>{t("user-details")}</div>
            <Button
              sx={{
                color: "black",
                padding: "0",
                minWidth: "auto",
              }}
              aria-label="close"
              onClick={handleTooltipClose}
            >
              <FontAwesomeIcon icon={faClose} className="cursor-pointer height20" tabIndex={0} />
            </Button>
          </div>

          <div className="widget-content">
            <TableContainer component={Paper}>
              <Table size="small" sx={{ minWidth: 400 }}>
                <TableBody>
                  <TableRow sx={{ "& td": { border: 0 } }}>
                    <TableCell scope="row">{t("username")}</TableCell>
                    <TableCell
                      align="right"
                      sx={{
                        wordWrap: "break-word",
                        maxWidth: 150,
                      }}
                    >
                      {row.original["username"]}
                    </TableCell>
                  </TableRow>
                  <TableRow sx={{ "& td": { border: 0 } }}>
                    <TableCell scope="row">{t("email")}</TableCell>
                    <TableCell align="right">{row.original["email"]}</TableCell>
                  </TableRow>
                  <TableRow sx={{ "& td": { border: 0 } }}>
                    <TableCell scope="row">{t("secondary-email")}</TableCell>
                    <TableCell align="right">{row.original["secondary_email"]}</TableCell>
                  </TableRow>
                  <TableRow sx={{ "& td": { border: 0 } }}>
                    <TableCell scope="row">{t("statusinfo")}</TableCell>
                    <TableCell align="right">{row.original["inactive"] ? t("inactive") : t("active")}</TableCell>
                  </TableRow>
                  <TableRow sx={{ "& td": { border: 0 } }}>
                    <TableCell scope="row">{t("primary-coach")}</TableCell>
                    <TableCell align="right">{row.original["primary_coach"]?.email}</TableCell>
                  </TableRow>
                  <TableRow sx={{ "& td": { border: 0 } }}>
                    <TableCell scope="row">{t("other-coaches")}</TableCell>
                    <TableCell align="right">{row.original["other-coaches"]?.email}</TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </TableContainer>
          </div>
        </>
      }
      placement="right"
      //   arrow
    >
      <Button className="buttonFontColor" sx={{ minWidth: "auto" }} aria-label="Info" onClick={handleTooltipOpen}>
        <FontAwesomeIcon icon={faInfoCircle} />
      </Button>
    </HtmlTooltip>
  );
};

export default InfoTooltipButton;

i want to bring the faCircle button over HtmlTooltip