import React from 'react';
import Tooltip from '../Tooltip/Tooltip';

export interface HelpIconProps {
  content: React.ReactNode;
  size?: 'sm' | 'md';
  className?: string;
}

/**
 * HelpIcon - A small info icon with tooltip
 * Useful for providing contextual help next to form labels
 */
export const HelpIcon: React.FC<HelpIconProps> = ({
  content,
  size = 'sm',
  className = '',
}) => {
  const sizeClasses = {
    sm: 'w-3.5 h-3.5',
    md: 'w-4 h-4',
  };

  return (
    <Tooltip
      content={content}
      placement="top"
      variant="info"
      size="sm"
      maxWidth={280}
      interactive={true}
    >
      <button
        type="button"
        className={`inline-flex items-center justify-center text-[var(--color-info)] hover:text-[var(--color-info-dark)] transition-colors cursor-help ${className}`}
        aria-label="Help"
        tabIndex={0}
      >
        <svg
          className={sizeClasses[size]}
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
      </button>
    </Tooltip>
  );
};

export default HelpIcon;
