import React, { FC } from 'react';
import { useLayer, useHover, Arrow } from 'react-laag';
import { StyledTooltip } from './style';

import { useTheme } from '@emotion/react';

export interface Props {
  content: string;
  delayEnter?: number;
  delayLeave?: number;
}

export const Tooltip: FC<Props> = ({
  children,
  content,
  delayEnter = 10,
  delayLeave = 300,
}) => {
  const colors = useTheme();
  const [isOver, hoverProps] = useHover({ delayEnter, delayLeave });

  //   const [isHover, setHover] = useState(false);
  const { triggerProps, layerProps, arrowProps, renderLayer } = useLayer({
    isOpen: isOver,
    auto: true,
    triggerOffset: 8,
  });

  return (
    <>
      <div {...triggerProps} {...hoverProps}>
        {children}
      </div>
      {isOver &&
        renderLayer(
          <StyledTooltip
            theme={{ ...colors }}
            className="tooltip"
            {...layerProps}
          >
            {content}
            <Arrow {...arrowProps} />
          </StyledTooltip>
        )}
    </>
  );
};