veza/apps/web/src/components/ui/HelpText.tsx

import { Info } from 'lucide-react';
import { Tooltip } from './tooltip';
import { cn } from '@/lib/utils';

/**
 * HelpTextProps - Propriétés du composant HelpText
 * 
 * @interface HelpTextProps
 */
interface HelpTextProps {
  /**
   * Texte d'aide à afficher dans le tooltip
   * 
   * @example
   * ```tsx
   * <HelpText text="Ce champ est optionnel" />
   * ```
   */
  text: string;
  
  /**
   * Classes CSS personnalisées
   */
  className?: string;
  
  /**
   * Position du tooltip par rapport à l'icône
   * 
   * - `top`: Au-dessus
   * - `bottom`: En-dessous
   * - `left`: À gauche
   * - `right`: À droite
   * 
   * @default 'top'
   */
  position?: 'top' | 'bottom' | 'left' | 'right';
}

/**
 * HelpText - Composant de texte d'aide avec tooltip
 * 
 * Composant affichant une icône d'information avec un tooltip au survol.
 * Utilisé pour fournir des informations contextuelles aux utilisateurs.
 * 
 * FE-COMP-024: Help text component with tooltip
 * 
 * @example
 * ```tsx
 * // Texte d'aide simple
 * <HelpText text="Ce champ est optionnel" />
 * 
 * // Avec position personnalisée
 * <HelpText 
 *   text="Minimum 8 caractères"
 *   position="right"
 * />
 * ```
 * 
 * @component
 * @param {HelpTextProps} props - Propriétés du composant
 * @returns {JSX.Element} Élément span avec icône Info et tooltip
 */
export function HelpText({
  text,
  className,
  position = 'top',
}: HelpTextProps) {
  return (
    <Tooltip content={text} position={position}>
      <span
        className={cn(
          'inline-flex items-center text-muted-foreground cursor-help',
          className,
        )}
        aria-label={`Aide: ${text}`}
      >
        <Info className="h-3 w-3" aria-hidden="true" />
      </span>
    </Tooltip>
  );
}