import cx from 'clsx';
import { ReactNode, useRef, useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import styles from './Tooltip.module.css';

interface TooltipProps {
  content: ReactNode;
  position?: 'top' | 'bottom' | 'left' | 'right';
  children?: ReactNode;
}

const positionMap = {
  top: styles.top,
  bottom: styles.bottom,
  left: styles.left,
  right: styles.right,
};

export function Tooltip({ content, position = 'top', children }: TooltipProps) {
  const [show, setShow] = useState(false);
  const contentRef = useRef<HTMLDivElement>();

  return (
    <div
      className={styles.tooltip_container}
      onMouseEnter={() => setShow(true)}
      onMouseLeave={() => setShow(false)}>
      {children}
      <CSSTransition
        nodeRef={contentRef}
        in={show}
        unmountOnExit
        classNames={{
          enter: styles.fade_enter,
          enterActive: styles.fade_enter_active,
          exit: styles.fade_exit,
          exitActive: styles.fade_exit_active,
        }}
        timeout={200}>
        <div className={cx(styles.tooltip, positionMap[position])} ref={contentRef}>
          {content}
        </div>
      </CSSTransition>
    </div>
  );
}