import { Info } from 'lucide-react';
import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';

/**
 * Pure-CSS tooltip (server-safe): an info glyph (or any trigger) that reveals a definition bubble on hover / focus.
 * Used by `DataStrip` for "How counted" definitions. The bubble is also readable by screen readers through `aria-describedby`.
 */
export function Hint({ text, children, className, align = 'left', id }: { text: ReactNode; children?: ReactNode; className?: string; align?: 'left' | 'right'; id?: string }) {
  const bubbleId = id ?? `hint-${hash(String(typeof text === 'string' ? text : 'hint'))}`;
  return (
    <span className={cn('hint', align === 'right' && 'hint-right', className)}>
      <button type="button" className="inline-flex size-6 items-center justify-center rounded-sm text-ink-3 hover:text-ink focus-visible:text-ink" aria-describedby={bubbleId} aria-label="Definition">
        {children ?? <Info className="size-3.5" aria-hidden />}
      </button>
      <span role="tooltip" id={bubbleId} className="hint-bubble">
        {text}
      </span>
    </span>
  );
}

function hash(s: string): string {
  let h = 0;
  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0;
  return Math.abs(h).toString(36);
}