import Tippy from "@tippyjs/react";
import { roundArrow } from "tippy.js";

import "tippy.js/dist/svg-arrow.css";
import { PropsWithChildren } from "react";
import { Trans } from "react-i18next";

import IconQuestion from "@/assets/icons/question.svg";

const Link = ({ to, children }: PropsWithChildren<{ to: string }>) => {
  return (
    <a href={to} className="text-primary-500" target="_blank" rel="noreferrer">
      {children}
    </a>
  );
};
export default function Tooltip({ link = "#" }) {
  return (
    <Tippy
      delay={[0, 500]}
      interactive
      arrow={roundArrow}
      placement="bottom"
      content={
        <div className="py-2 px-3 bg-gray-800 text-xs text-white rounded-lg">
          <Trans ns="setting" i18nKey={"login.more_details"}>
            <Link to={link} />
          </Trans>
        </div>
      }
    >
      <IconQuestion className="icon" />
    </Tippy>
  );
}
