import React from 'react';

interface PopupProps {
  isOpen: boolean;
  onClose: (value:boolean) => void;
  children: React.ReactNode;
}

const Popup: React.FC<PopupProps> = ({ isOpen, onClose, children }) => {

  if (!isOpen) return null;

  return (
    <div className='relative border border-[#0c67a1] p-2 shadow-md bg-[#000000] bg-opacity-90 text-[16px] leading-[16px]'
      onClick={(e) => e.stopPropagation()} // Prevent closing on content click
    >
      <div className='text-[10px] leading-[10px] mb-1'>New constellation</div>
      {children}
      <button
        style={{
          position: 'absolute',
          top: '15px',
          right: '10px',
          background: 'transparent',
          border: 'none',
          fontSize: '12px',
          cursor: 'pointer',
        }}
        onClick={()=>onClose(false)}
      >
        ✖
      </button>
    </div>
  );
};

export default Popup;