import React from 'react';
import ReactDOM from 'react-dom';

const Popup = ({ visible, message, onConfirm, onCancel, uniqueConfirmButton = false }) => {
  if (!visible) return null;

  // Vérifier si le message est une chaîne de caractères
  const isStringMessage = typeof message === 'string';
  // Diviser le message en lignes seulement si c'est une chaîne
  const messageLines = isStringMessage ? message.split('\n') : null;

  return ReactDOM.createPortal(
    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
      <div className="bg-white p-6 rounded-lg shadow-xl max-w-md w-full">
        <div className="mb-4">
          {isStringMessage ? (
            // Afficher le message sous forme de lignes si c'est une chaîne
            messageLines.map((line, index) => (
              <p key={index} className="text-gray-700">
                {line}
              </p>
            ))
          ) : (
            // Sinon, afficher directement le contenu React
            message
          )}
        </div>
        <div className="flex justify-end space-x-2">
          {!uniqueConfirmButton && (
            <button
              className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
              onClick={onCancel}
            >
              Annuler
            </button>
          )}
          <button
            className="px-4 py-2 bg-emerald-500 text-white rounded hover:bg-emerald-600"
            onClick={onConfirm}
          >
            {uniqueConfirmButton ? 'Fermer' : 'Confirmer'}
          </button>
        </div>
      </div>
    </div>,
    document.body
  );
};

export default Popup;
