import React from 'react'

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

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

TooltipContent.displayName = 'TooltipContent'
