import { Zoom } from "@mui/material";
import { styled } from "@mui/material/styles";
import { Tooltip, tooltipClasses, TooltipProps } from "@mui/material";

interface Props extends TooltipProps {
  children: React.ReactElement;
}

export const Tooltips = styled(({ placement, title, className, ...props }: Props) => (
  <Tooltip
    title={title}
    placement={placement}
    classes={{ popper: className }}
    TransitionComponent={Zoom}
    {...props}
  />
))(({ theme }) => ({
  [`& .${tooltipClasses.tooltip}`]: {
    margin: "1.25rem",
    zindex: 10,
    maxWidth: 600,
    fontWeight: "400",
    fontFamily: "Poppins",
    letterSpacing: "-0.25px",
    border: ".25px solid var(--white-solid)",
    color: "var(--white-solid)",
    padding: theme.spacing(1.25),
    backgroundColor: "var(--gray-solid)",
    fontSize: theme.typography.pxToRem(11),
  },
}));

export default Tooltips;