export const DeleteConfirmationDialog = ({ isOpen, onConfirm, onCancel, entityName, }) => {
    if (!isOpen)
        return null;
    return (<div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-[9999] pointer-events-auto">
      <div className="bg-white p-6 rounded-md shadow-md w-[90%] max-w-md pointer-events-auto" onClick={(e) => e.stopPropagation()}>
        <h2 className="text-xl font-semibold mb-4">Confirm Deletion</h2>

        <p>
          Are you sure you want to delete <strong>{entityName}</strong>?
        </p>

        <div className="mt-6 flex justify-end space-x-4">
          <button type="button" className="bg-gray-200 px-4 py-2 rounded hover:bg-gray-300" onClick={(e) => {
            e.stopPropagation();
            onCancel();
        }}>
            Cancel
          </button>

          <button type="button" className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700" onClick={(e) => {
            e.stopPropagation();
            onConfirm();
        }}>
            Delete
          </button>
        </div>
      </div>
    </div>);
};
