import * as React from "react";
import { Info } from "lucide-react";
import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
import { cn } from "@/lib/utils";

export interface InfoTooltipProps {
  /** Explainer text shown when the info icon is hovered/focused. */
  text: React.ReactNode;
  /** Tooltip placement relative to the icon. Defaults to "top". */
  side?: "top" | "right" | "bottom" | "left";
  /** Extra classes for the info-icon trigger (e.g. size or colour tweaks). */
  className?: string;
  /** Extra classes for the tooltip content bubble (e.g. a wider max-width). */
  contentClassName?: string;
}

/**
 * InfoTooltip — a muted info (ⓘ) icon that reveals an explainer tooltip on
 * hover/focus. The shared primitive behind the "how is this calculated" hints
 * on cards and category breakdowns (dashboard expense categories, incoming &
 * outgoings, etc.).
 */
export function InfoTooltip({
  text,
  side = "top",
  className,
  contentClassName,
}: InfoTooltipProps): React.ReactElement {
  return (
    <Tooltip>
      <TooltipTrigger
        render={
          <span
            className={cn(
              "inline-flex cursor-help text-muted-foreground/70",
              className,
            )}
            aria-label="More information"
          />
        }
      >
        <Info className="size-3.5" />
      </TooltipTrigger>
      <TooltipContent side={side} className={cn("max-w-72", contentClassName)}>
        {text}
      </TooltipContent>
    </Tooltip>
  );
}