import { HelpCircle } from "lucide-react";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { getGlossaryTerm } from "@/lib/glossary";
import { cn } from "@/lib/utils";

interface TermTooltipProps {
  term: string;
  children: React.ReactNode;
  inline?: boolean;
  showIcon?: boolean;
}

export function TermTooltip({ term, children, inline = false, showIcon = true }: TermTooltipProps) {
  const glossaryEntry = getGlossaryTerm(term);
  
  if (!glossaryEntry) {
    return <>{children}</>;
  }
  
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <span className={cn(
          "inline-flex items-center gap-1",
          inline && "underline decoration-dotted cursor-help"
        )}>
          {children}
          {showIcon && (
            <HelpCircle className="inline-block w-3 h-3 text-muted-foreground" />
          )}
        </span>
      </TooltipTrigger>
      <TooltipContent className="max-w-xs" side="top">
        <div className="space-y-1">
          <div className="font-semibold text-sm">{glossaryEntry.term}</div>
          <p className="text-xs text-muted-foreground capitalize">
            {glossaryEntry.category.replace('-', ' ')}
          </p>
          <p className="text-sm">{glossaryEntry.definition}</p>
          {glossaryEntry.example && (
            <p className="text-xs text-muted-foreground italic pt-1">
              Example: {glossaryEntry.example}
            </p>
          )}
          {glossaryEntry.relatedTerms && glossaryEntry.relatedTerms.length > 0 && (
            <p className="text-xs text-muted-foreground pt-1">
              See also: {glossaryEntry.relatedTerms.map(t => 
                getGlossaryTerm(t)?.term || t
              ).join(', ')}
            </p>
          )}
        </div>
      </TooltipContent>
    </Tooltip>
  );
}