import { Info } from 'lucide-react';

interface InfoTipProps {
  text: string;
  className?: string;
}

/**
 * Small info icon with hover/focus tooltip for metric explanations.
 */
export function InfoTip({ text, className = '' }: InfoTipProps) {
  return (
    <span className={`relative inline-flex shrink-0 group ${className}`}>
      <button
        type="button"
        title={text}
        aria-label="More information"
        className="rounded-full p-0.5 text-gray-400 hover:text-gray-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/40 focus-visible:ring-offset-1"
      >
        <Info className="h-3.5 w-3.5" strokeWidth={2} aria-hidden />
      </button>
      <span
        role="tooltip"
        className="pointer-events-none group-hover:pointer-events-auto absolute left-1/2 bottom-[calc(100%+8px)] z-[60] w-[min(22rem,calc(100vw-2rem))] max-h-64 overflow-y-auto -translate-x-1/2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-left text-[11px] leading-snug font-normal normal-case tracking-normal text-gray-600 shadow-lg opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100 invisible group-hover:visible group-focus-within:visible"
      >
        {text}
      </span>
    </span>
  );
}
