import React from 'react';

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

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

  return (
    <div className="fixed inset-0 z-[9999] flex items-center justify-center">
      {/* Overlay noir semi-transparent */}
      <div
        className="fixed inset-0 bg-black bg-opacity-60 transition-opacity z-[9998]"
        onClick={() => {
          if (setIsOpen) setIsOpen(false);
          else if (onCancel) onCancel();
        }}
      />
      <div
        className={`relative bg-white p-4 sm:p-6 rounded-xl shadow-2xl w-full max-w-xs sm:max-w-md ${popupClassName ? popupClassName : ''}`}
        style={{ zIndex: 9999 }}
      >
        {/* Titre ou message */}
        <div className="mb-6 text-center">
          {isStringMessage
            ? messageLines.map((line, index) => (
                <p key={index} className="text-gray-800 text-base">
                  {line}
                </p>
              ))
            : message}
        </div>
        {/* Boutons d'action */}
        <div className="flex justify-center space-x-4 mt-8">
          {!uniqueConfirmButton && (
            <button
              className="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 focus:outline-none transition"
              onClick={() => {
                if (setIsOpen) setIsOpen(false);
                else if (onCancel) onCancel();
              }}
            >
              Annuler
            </button>
          )}
          <button
            className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary focus:outline-none transition"
            onClick={() => {
              if (onConfirm) onConfirm();
              else if (setIsOpen) setIsOpen(false);
            }}
          >
            {uniqueConfirmButton ? 'Fermer' : 'Confirmer'}
          </button>
        </div>
      </div>
    </div>
  );
};

export default Popup;
