import { Tooltip } from "@visx/tooltip";
import React from "react";

import styles from "./TooltipWrapper.module.css";

type TooltipWrapperProps = {
  top?: number;
  left?: number;
  className?: string;
  header?: string;
  children?: React.ReactNode;
};

const TooltipWrapper = ({
  top,
  left,
  className,
  header,
  children,
}: TooltipWrapperProps) => {
  return (
    <Tooltip
      top={top}
      left={left}
      className={`${styles.tooltip} ${className ?? ""}`}
      unstyled
      applyPositionStyle
    >
      {header ? <span className={styles.header}>{header}</span> : null}
      {children ? <div className={styles.body}>{children}</div> : null}
    </Tooltip>
  );
};

export { TooltipWrapper };