"use client";

import clsx from "clsx";
import type { FC } from "react";
import { Tooltip as ReactTooltip, type ITooltip } from "react-tooltip";
import styles from "./Tooltip.module.css";

export interface TooltipProps extends ITooltip {
  id: string;
  "data-testid"?: string;
  disableStyleInjection?: "core" | undefined;
}

export const Tooltip: FC<TooltipProps> = ({
  id,
  "data-testid": testId,
  children,
  disableStyleInjection,
  ...props
}) => (
  <div className={styles.container} {...(testId && { "data-testid": testId })}>
    <ReactTooltip
      id={id}
      {...props}
      className={clsx([styles.tooltip, props.className])}
      disableStyleInjection={disableStyleInjection}
    >
      {children}
    </ReactTooltip>
  </div>
);
