"use client";
import type { ReactNode } from "react";
import { Tooltip as TooltipPrimitive } from "radix-ui";
import { Info } from "lucide-react";
import { GLOSSAIRE, type CleGlossaire } from "@/lib/glossaire";
import { cn } from "@/lib/utils";
/** À placer une fois en haut de l'arbre (cf. app/providers.tsx). */
export function TooltipProvider({ children }: { children: ReactNode }) {
return (
{children}
);
}
interface TooltipProps {
content: ReactNode;
children: ReactNode;
side?: "top" | "right" | "bottom" | "left";
}
/** Infobulle accessible (survol et focus clavier), lisible dans les deux thèmes. */
export function Tooltip({ content, children, side = "top" }: TooltipProps) {
return (
{children}
{content}
);
}
interface TermeProps {
/** Entrée du glossaire à expliquer. */
id: CleGlossaire;
/** Texte affiché ; par défaut le libellé du glossaire. */
children?: ReactNode;
className?: string;
}
/**
* Terme métier avec sa définition au survol : un petit « i » signale qu'une
* explication existe, sans encombrer la lecture.
*/
export function Terme({ id, children, className }: TermeProps) {
const entree = GLOSSAIRE[id];
return (
{entree.terme}
{entree.definition}
}
>
{children ?? entree.terme}
);
}
/** Texte suivi d'un « i » : explication libre au survol (hors glossaire). */
export function InfoBulle({ children, explication, className }: { children: ReactNode; explication: ReactNode; className?: string }) {
return (
{children}
);
}