import * as React from "react";
import { styled } from "@mui/material/styles";
import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
import './styles.scss'

const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
  <Tooltip {...props} classes={{ popper: className }} />
))(({}) => ({
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: "#ffffff",
    color: "rgba(0, 0, 0, 0.87)",
    maxWidth: 500,
    fontSize: 14,
    padding: 12,
    border: "1px solid #ddd",
    boxShadow: "0px 0px 15px 1px rgba(0,0,0,0.2)",
    top: "0px",
  },
}));

export function CustomizedTooltips({
  title,
  children,
  placement,
  arrow=false,
  ...props
}: TooltipProps) {
  return (
    <div>
      <HtmlTooltip arrow={arrow} title={title} placement={placement} {...props}>
        <div>{children}</div>
      </HtmlTooltip>
    </div>
  );
}
