import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';

/**
 * Petite pastille « ? » avec une bulle d'aide. Utilisée partout sur les champs
 * du Yield Manager pour expliquer chaque réglage avec un exemple chiffré.
 */
export default function HelpHint({ text }: { text: string }) {
    return (
        <TooltipProvider delayDuration={150}>
            <Tooltip>
                <TooltipTrigger asChild>
                    <span
                        className="border-muted-foreground/40 text-muted-foreground ml-1 inline-flex h-4 w-4 cursor-help items-center justify-center rounded-full border align-middle text-[10px] font-semibold leading-none"
                        aria-label="Aide"
                    >
                        ?
                    </span>
                </TooltipTrigger>
                <TooltipContent className="max-w-xs text-xs leading-relaxed">{text}</TooltipContent>
            </Tooltip>
        </TooltipProvider>
    );
}