"use client";

import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
  TooltipProvider,
} from "@/components/ui/tooltip";
import clsx from "clsx";
import { ReactNode } from "react";

const AbbreviationWithTooltip = ({
  children,
  explanation,
}: {
  children: ReactNode;
  explanation: string;
}) => {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <abbr className={clsx("border-dashed border-neutral-400")}>
            {children}
          </abbr>
        </TooltipTrigger>
        <TooltipContent>
          <p>{explanation}</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
};

export default AbbreviationWithTooltip;