import { forwardRef, PropsWithChildren } from 'react'

/**
 * Helper wrapper for custom child components when using `@mui/material/tooltips`.
 * Mui Tooltip works out-the-box with other `@mui` components but when using custom they require ref.
 * @source https://mui.com/material-ui/react-tooltip/#custom-child-element
 */
export const TooltipChild = forwardRef<HTMLSpanElement, PropsWithChildren>(
  ({ children, ...rest }, ref) => {
    return (
      <span ref={ref} {...rest}>
        {children}
      </span>
    )
  }
)