import React from 'react';
import ReactTooltip from 'react-tooltip';

import { Tooltip as TooltipStyle } from '../../styles/components/shared/Tooltip.style';

interface Props {
  children: JSX.Element | string;
  id: string;
  display?: string;
  hoverable: JSX.Element | string;
  place?: 'top' | 'right' | 'bottom' | 'left';
}

export const Tooltip: React.FC<Props> = ({ children, id, display = 'inline', hoverable, place }) => (
  <>
    <TooltipStyle data-tip data-for={id} display={display}>
      {hoverable}
    </TooltipStyle>
    <ReactTooltip id={id} effect="float" place={place}>
      {children}
    </ReactTooltip>
  </>
);