import { Tooltip, TooltipProps, tooltipClasses } from '@mui/material';
import { mergeSx } from '../../Util/style';

export interface TooltipIconProps extends TooltipProps {
  fontSize?: number | string;
  fontWeight?: number | string;
  color?: string;
}

export default function TooltipIcon({
  title,
  sx,
  children,
  slotProps,
  fontSize = 12,
  fontWeight = 500,
  color = 'text.contrast',
  ...props
}: TooltipIconProps) {
  return title ? (
    <Tooltip
      title={title}
      placement="top"
      {...props}
      slotProps={{
        popper: {
          ...slotProps?.popper,
          sx: mergeSx(
            {
              [`& .${tooltipClasses.tooltip}`]: {
                fontSize,
                fontWeight,
                boxShadow: 2,
                marginBottom: '6px !important',
                borderRadius: '8px',
                cursor: 'default',
                color,
                display: 'flex',
                alignItems: 'center',
              },
            },
            // @ts-expect-error
            slotProps?.popper?.sx
          ),
        },
      }}>
      {children}
    </Tooltip>
  ) : (
    children
  );
}
