import React, { ReactNode, useEffect } from "react";
import styles from "@/styles/PopUp.module.css";

interface PopupProps {
  isOpen: boolean;
  onClose: () => void;
  maxWidth?: string;
  children?: ReactNode;
}

function Popup({ isOpen, onClose, maxWidth, children }: PopupProps) {
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [onClose]);

  if (!isOpen) return null;

  return (
    <div className={styles.popupOverlay} onClick={onClose}>
      <div
        className={styles.popupContainer}
        style={maxWidth ? { maxWidth } : undefined}
        onClick={(e) => e.stopPropagation()}
      >
        <button className={styles.popupClose} onClick={onClose}>
          ✕
        </button>
        <div className={styles.popupContent}>{children}</div>
      </div>
    </div>
  );
}

export default Popup;