import { styled } from "@mui/material/styles";
import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
import type { TooltipProps } from "@mui/material/Tooltip";
import "./Tooltip.css";
interface TooltipCustoProps {
  title: string;
  children: React.ReactElement;
  content?: React.ReactNode;
}
const RawTooltip = styled(({ className, ...props }: TooltipProps) => (
  <Tooltip {...props} classes={{ popper: className }} />
))(({ theme }) => ({
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: "#f5f5f9",
    color: "#fff",
    maxWidth: 300,
    fontSize: theme.typography.pxToRem(12),
    border: "none",
    padding: 0,
    display: "flex",
    flexDirection: "column",
  },
}));

function TooltipFull({ title, children, content }: TooltipCustoProps) {
  return (
    <>
      <RawTooltip
        title={
          <>
            <div className="panel-tooltip-title">{title}</div>
            {content && <div className="panel-tooltip">{content}</div>}
          </>
        }
      >
        {children}
      </RawTooltip>
    </>
  );
}
export function TooltipSimple({ title, children }: TooltipCustoProps) {
  return (
    <>
      <RawTooltip title={title}>{children}</RawTooltip>
    </>
  );
}
export default TooltipFull;
