import { forwardRef } from "react";

/**
 * Tooltip
 *
 * tip:      string - plain-text tooltip content (sets data-tip)
 * position: "bottom" | "left" | "right" | (default top)
 * open:     boolean - force visible state
 * content:  ReactNode - rich HTML tooltip (renders .prs-tooltip-content instead of data-tip)
 * children: ReactNode - the trigger element
 */
const Tooltip = forwardRef(function Tooltip(
  { tip, position, open = false, content, className = "", children, ...props },
  ref
) {
  const classes = [
    "prs-tooltip",
    open && "prs-tooltip-open",
    position === "bottom" && "prs-tooltip-bottom",
    position === "left" && "prs-tooltip-left",
    position === "right" && "prs-tooltip-right",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  const tipProps = content ? {} : { "data-tip": tip };

  return (
    <div ref={ref} className={classes} {...tipProps} {...props}>
      {content && <div className="prs-tooltip-content">{content}</div>}
      {children}
    </div>
  );
});

export default Tooltip;