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-gray-300 text-white rounded hover:bg-gray-700 hover:bg-gray-400"
              onClick={onCancel}
            >
              Annuler
            </button>
          )}
          <button
            className="px-4 py-2 bg-emerald-500 text-white hover:bg-emerald-600 rounded hover:bg-emerald-600"
            onClick={onConfirm}
          >
            {uniqueConfirmButton ? 'Fermer' : 'Confirmer'}
          </button>
        </div>
      </div>
    </div>,
    document.body
  );
};

export default Popup;