import zIndex from "@mui/material/styles/zIndex";
import ReactDOM from 'react-dom';

export default function ConfirmationModal({ isOpen, onClose, onConfirm, message }) {
  //export default function ConfirmationModal({ isOpen, onClose, onConfirm, message })
  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-container opacity-100 inset-0 flex items-center justify-center z-1152">
      <div className="bg-white p-4 rounded-md shadow-lg modal-content">
        <p className="mb-4">{message}</p>
        <button className="bg-red-500 text-white px-4 py-2 rounded mr-2" onClick={onConfirm}>
          Потвтрждавам
        </button>
        <button className="bg-gray-300 px-4 py-2 rounded" onClick={onClose}>
          Отказвам
        </button>
      </div>
      <div className="fixed inset-0 bg-black opacity-50 modal-overlay" onClick={onClose}></div>
    </div>
  );

  return ReactDOM.createPortal(
    modalContent,
    document.getElementById('modal-root')
  );
};
// const CustomCalendar = ({ month, year, shifts }) => {
// export default function CustomCalendar({ date, shifts }: CustomCalendarProps) {