import React, { Fragment } from 'react'
import 'react-tippy/dist/tippy.css'
import { Tooltip } from 'react-tippy'
import { Text, Row } from 'pubsweet-component-faraday-ui'
import { ThemeProvider, withTheme } from 'styled-components'

const TitleTooltip = ({ theme = {}, title = '' }) => (
  <ThemeProvider theme={theme}>
    <Fragment>
      <Row mt={1}>
        <Text>{title}</Text>
      </Row>
    </Fragment>
  </ThemeProvider>
)

const TextTooltip = ({ theme = {}, children, ...rest }) => (
  <Tooltip
    arrow
    html={<TitleTooltip theme={theme} {...rest} />}
    position="bottom"
    theme="light"
  >
    {children}
  </Tooltip>
)

export default withTheme(TextTooltip)