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

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>
          <IconButton onClick={onClose} className="shrink-0">
            <CloseIcon />
          </IconButton>
        </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>
  );
}