import { useRef, useCallback, type ReactNode } from 'react';
import { useClickOutside } from '../hooks/useClickOutside';

interface InfoPopupProps {
  title: string;
  children: ReactNode;
  onClose: () => void;
  sourceLink?: { label: string; onClick: () => void };
}

export default function InfoPopup({ title, children, onClose, sourceLink }: InfoPopupProps) {
  const popupRef = useRef<HTMLDivElement>(null);

  const handleClose = useCallback(() => {
    onClose();
  }, [onClose]);

  useClickOutside(popupRef, handleClose);

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30">
      <div
        ref={popupRef}
        className="bg-white dark:bg-navy-800 border border-warm-200 dark:border-navy-700 rounded-lg shadow-xl max-w-md w-full mx-4 p-5"
      >
        <div className="flex items-start justify-between mb-3">
          <h3 className="text-sm font-semibold text-warm-900 dark:text-warm-100 pr-4">{title}</h3>
          <button
            onClick={onClose}
            className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 shrink-0"
          >
            <svg
              className="w-4 h-4"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={2}
            >
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        {children}
        {sourceLink && (
          <button
            onClick={sourceLink.onClick}
            className="text-sm text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-300 hover:underline"
          >
            {sourceLink.label}
          </button>
        )}
      </div>
    </div>
  );
}
