import React, { createContext, useState, useCallback } from 'react';
import Popup from './Popup';

export const PopupContext = createContext();

const PopupProvider = ({ children }) => {
  const [popup, setPopup] = useState(null);

  const showAlert = useCallback((description, options = {}) => {
    setPopup({ description, ...options });
  }, []);

  const closeAlert = () => setPopup(null);

  return (
    <PopupContext.Provider value={{ showAlert }}>
      {children}
      {popup && <Popup alert={popup} closeAlert={closeAlert} />}
    </PopupContext.Provider>
  );
};

export default PopupProvider;