import { Header3 } from "./primitives/Headers";
import { Paragraph } from "./primitives/Paragraph";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/Tooltip";

export function DefinitionTip({
  content,
  children,
  title,
  disableHoverableContent = true,
}: {
  content: React.ReactNode;
  children: React.ReactNode;
  title: React.ReactNode;
  disableHoverableContent?: boolean;
}) {
  return (
    <TooltipProvider>
      <Tooltip disableHoverableContent={disableHoverableContent}>
        <TooltipTrigger className="text-left">
          <span className="cursor-default underline decoration-text-faint decoration-dashed underline-offset-4 transition hover:decoration-text-dimmed">
            {children}
          </span>
        </TooltipTrigger>
        <TooltipContent align="end" side="right" className="w-64 min-w-64">
          <Header3 className="mb-1">{title}</Header3>
          {typeof content === "string" ? (
            <Paragraph variant="small">{content}</Paragraph>
          ) : (
            <div>{content}</div>
          )}
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}