import React, { forwardRef } from "react";
import classNames from "classnames";
import { Link, LinkProps } from "../Link";

export const TooltipLink = forwardRef<
  HTMLAnchorElement | HTMLButtonElement | HTMLDivElement,
  LinkProps
>(({ children, className, ...rest }, ref) => (
  <Link
    ref={ref}
    className={classNames(
      "text-white transition-[color] underline hover:text-white hover:text-opacity-80",
      className,
    )}
    noStyles
    {...rest}
  >
    {children}
  </Link>
));