import Box from '../box'
import { bg, borderRadius, boxShadow } from './consts'
import type { TooltipProps } from './tooltip.types'

export const TooltipContent = ({
  children,
  disabled,
  fontSize = '16px',
  maxWidth = '400px',
  minWidth,
  whiteSpace = 'pre-wrap',
  wordBreak = 'break-word',
}: TooltipProps) => (
  <Box
    bg={disabled ? bg.disabled : bg.regular}
    borderRadius={borderRadius}
    boxShadow={boxShadow}
    className="vui-tooltip-content"
    color="white"
    fontSize={fontSize}
    m={1}
    minW={minWidth}
    maxW={maxWidth}
    overflowY="auto"
    p={1}
    px={2}
    whiteSpace={whiteSpace}
    wordBreak={wordBreak}
  >
    {children}
  </Box>
)

TooltipContent.displayName = 'TooltipContent'
