import { Popover, Box, PopoverProps } from '@tidbcloud/uikit'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'
import React from 'react'

const Tooltip: React.FC<React.PropsWithChildren<PopoverProps & { trigger?: React.ReactNode }>> = ({
  trigger = <Box component={IconInfoCircle} />,
  position = 'right',
  withArrow = true,
  width = 300,
  children,
  ...props
}) => {
  const [opened, { open, close }] = useDisclosure(false)
  return (
    <Popover withArrow={withArrow} width={width} position={position} {...props} opened={opened}>
      <Popover.Target>
        <Box sx={{ display: 'inline-block' }} onMouseEnter={open} onMouseLeave={close}>
          {trigger}
        </Box>
      </Popover.Target>
      <Popover.Dropdown>{children}</Popover.Dropdown>
    </Popover>
  )
}

export default Tooltip