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

interface HelpTextProps {
  text: string;
  className?: string;
  position?: 'top' | 'bottom' | 'left' | 'right';
}

/**
 * FE-COMP-024: Help text component with 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>
  );
}